JavaScript Funciones

Una función es un bloque de código reutilizable que se ejecuta mediante eventos o cuando se le llama.

Ejemplos

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo de prueba</title> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">Haz clic</button> </body> </html>

Pruébalo »

Sintaxis de funciones de JavaScript

Una función es un bloque de código encerrado entre llaves, precedido por la palabra clave function:

function functionname()
{
    // ejecutar código
}

Cuando se llama a la función, se ejecuta el código que contiene.

Se puede llamar a la función directamente cuando ocurre un evento (por ejemplo, cuando el usuario hace clic en un botón), y también se puede llamar desde cualquier parte mediante JavaScript.

lamp JavaScript distingue entre mayúsculas y minúsculas. La palabra clave function debe escribirse en minúsculas, y la función debe llamarse usando las mismas mayúsculas y minúsculas que el nombre de la función.

Llamar a una función con parámetros

Al llamar a una función, puede pasarle valores; estos valores se denominan parámetros.

Estos parámetros se pueden utilizar dentro de la función.

Puede enviar tantos parámetros como quiera, separados por comas (,):

myFunction(argument1,argument2)

Al declarar la función, declare los parámetros como si fueran variables:

function myFunction(var1,var2)
{
Código
}

Las variables y los parámetros deben aparecer en un orden coherente. La primera variable es el valor dado al primer parámetro pasado, y así sucesivamente.

Ejemplo

<p>Haga clic en este botón para llamar a la función con parámetros.</p> <button onclick="myFunction('Harry Potter','Wizard')">Haz clic aquí</button> <script> function myFunction(name,job){ alert("Welcome " + name + ", the " + job); } </script>

Pruébalo »

La función anterior mostrará "Welcome Harry Potter, the Wizard" cuando se haga clic en el botón.

La función es muy flexible: puede llamarla con diferentes parámetros y así mostrará diferentes mensajes:

Ejemplo

<button onclick="myFunction('Harry Potter','Wizard')">Haz clic aquí</button> <button onclick="myFunction('Bob','Builder')">Haz clic aquí</button>

Pruébalo »

Dependiendo del botón en el que haga clic, el ejemplo anterior mostrará "Welcome Harry Potter, the Wizard" o "Welcome Bob, the Builder".

Funciones con valor de retorno

A veces queremos que la función devuelva un valor al lugar desde donde se llamó.

Esto se puede lograr usando la declaración return.

Cuando se usa la declaración return, la función deja de ejecutarse y devuelve el valor especificado.

Sintaxis

function myFunction()
{
    var x=5;
    return x;
}

La función anterior devolverá el valor 5.

Nota:No todo JavaScript deja de ejecutarse, solo la función. JavaScript continuará ejecutando el código desde el lugar donde se llamó a la función.

La llamada a la función será reemplazada por el valor de retorno:

var myVar=myFunction();

El valor de la variable myVar es 5, que es el valor devuelto por la función "myFunction()".

Incluso si no lo guarda en una variable, puede utilizar el valor de retorno:

document.getElementById("demo").innerHTML=myFunction();

El innerHTML del elemento "demo" será 5, que es el valor devuelto por la función "myFunction()".

Puede hacer que el valor de retorno dependa de los parámetros pasados a la función:

Ejemplo

Calcula el producto de dos números y devuelve el resultado:

function myFunction(a,b) { return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3);

El innerHTML del elemento "demo" será:

12

Pruébalo »

También puede usar la declaración return si simplemente desea salir de la función. El valor de retorno es opcional:

function myFunction(a,b) { if (a>b) { return; } x=a+b }

Si a es mayor que b, el código anterior saldrá de la función y no calculará la suma de a y b.

Variables locales de JavaScript

Las variables declaradas dentro de una función de JavaScript (usando var) sonlocalesVariables, por lo que solo se puede acceder a ellas dentro de la función. (El ámbito de esta variable es local).

Puede utilizar variables locales con el mismo nombre en diferentes funciones, porque solo la función que declaró la variable puede reconocerla.

Las variables locales se eliminan tan pronto como la función termina de ejecutarse.

Variables globales de JavaScript

Las variables declaradas fuera de una función songlobalesVariables, y todos los scripts y funciones de la página web pueden acceder a ellas.

Ciclo de vida de las variables de JavaScript

El ciclo de vida de las variables de JavaScript comienza desde el momento en que se declaran.

Las variables locales se eliminan después de que la función se ejecuta.

Las variables globales se eliminan después de que se cierra la página.

Asignar valores a variables de JavaScript no declaradas

Si asigna un valor a una variable no declarada, la variable se convertirá automáticamente en una propiedad de window.

Esta declaración:

carname="Volvo";

declarará una propiedad de window llamada carname.

En modo no estricto, las variables globales creadas al asignar valores a variables no declaradas son propiedades configurables del objeto global y pueden eliminarse.

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
Otras extensiones