Para describir una función en javascript. Usar un botón HTML para llamar a una función de JavaScript. Dónde colocar declaraciones de funciones

¡Artículo en desarrollo!

Un artículo en el que consideraremos qué es una función, así como la versión tradicional (clásica) de trabajar con ella. Además, analizaremos cuáles son los argumentos (parámetros) de la función y el operador de retorno.

¿Qué es una función?

Una función es un conjunto de instrucciones a las que se les puede dar un nombre y luego se puede acceder a ellas con ese nombre desde cualquier parte del programa.

Un ejemplo clásico del uso de una función. Hay un código JavaScript en una página web, algún fragmento del cual se repite varias veces. Para evitar esto, puede diseñar este fragmento como una función y luego llamarlo en los lugares correctos

código por el nombre de esta función. Llamar a esta función supondrá ejecutar las instrucciones contenidas en ella.

• ¿Cómo organizar la ejecución de alguna tarea en JavaScript usando funciones? Para hacer esto normalmente haces esto:
• dividir la tarea en sus partes componentes (subtareas);
• las subtareas se formalizan a través de funciones;

Desarrollar el código principal utilizando llamadas a las funciones creadas. Como resultado, dicho programa se vuelve más estructurado. Es más fácil agregar varios cambios

y agregar nuevas funciones.

Declarar y llamar a una función

• Las operaciones con una función en JavaScript se pueden dividir en 2 pasos:
• declaración (creación) de una función.

llamar (ejecutar) esta función. Declaración de función. La creación de una función en JavaScript comienza con la escritura

palabra clave

función , luego se indica el nombre de la función, luego los parámetros se enumeran entre paréntesis x, si es necesario, luego se indican las instrucciones, que están entre llaves.

// declaración de función algúnNombre función algúnNombre() ( alert("¡Llamaste a la función algúnNombre!"); ) JavaScript - Sintaxis de declaración de función

Una función puede tener tantos parámetros como se desee o ninguno. En cualquier caso se incluyen paréntesis. Si hay varios parámetros, deben estar separados por una coma. Se accede a los parámetros de función por su nombre.

Un conjunto de instrucciones encerradas entre llaves es el código de función que se ejecutará cuando se llame.

Llamada a función.

La función declarada en sí no se ejecutará. Para ejecutarlo es necesario llamarlo. Una función se llama especificando su nombre y dos paréntesis. Los argumentos se especifican entre paréntesis si es necesario.

// llama a la función dada en el ejemplo anterior someName();

JavaScript: sintaxis de llamada a función ¿Es una función un objeto en JavaScript? Las funciones en JavaScript son objetos.

En JavaScript, todo es un objeto excepto seis.

tipos primitivos

datos. Y si la función es un objeto, entonces se puede almacenar una referencia a ella en una variable.

// declaración de función algúnNombre función algúnNombre() ( alert("¡Llamaste a la función algúnNombre!"); ) var referencia = algúnNombre;

Después de esto, puedes llamar a la función así:

Referencia();

Parámetros y argumentos de función.

Los argumentos de una función son valores que se pasan a una función cuando se llama. Los argumentos se separan entre sí mediante una coma.

// llama a la función sayWelcome pasándole dos argumentos sayWelcome("Ivan", "Ivanov"); // otra llamada a la función sayWelcome con dos argumentos sayWelcome("Peter", "Petrov");

Los parámetros de función son una de las formas en JavaScript de acceder a los argumentos dentro de una función. Los parámetros de la función en la etapa de su declaración se describen entre paréntesis.

Por ejemplo, llamemos a la función del ejemplo anterior, sin especificar uno o dos parámetros:

// llamando a la función sayWelcome y pasándole un argumento sayWelcome("Peter"); // Bienvenido, Peter indefinido // llamando a la función sayWelcome sin pasarle ningún argumento sayWelcome(); // Bienvenido, indefinido indefinido

Un ejemplo de una función que simplemente enviará los argumentos que se le pasan a la consola del navegador:

// declaración de función función outputParam(param1, param2, param3) ( console.log(param1 + "; " + param2 + "; " + param3); ) // llama a la función outputParam pasándola diferentes cantidades parámetros salidaParam("Lluvia","Nieve","Niebla"); // Lluvia; Nieve; Salida de nieblaParam(17); // 17; indefinido; parámetro de salida indefinido(24,33); // 24; 33; parámetro de salida indefinido(); // indefinido; indefinido; indefinido

Otra forma de acceder a los argumentos dentro de una función es utilizar el objeto de argumentos especiales. Se accede a los argumentos a través de argumentos de la misma manera que a los elementos de una matriz normal, es decir. por sus números de serie. Por lo tanto, argumento - le permitirá obtener el primer argumento, argumentos - el segundo argumento, etc.

// anuncio funciones de suma función suma(num1, num2) ( /* num1 o argumentos – obtiene el valor del argumento 1 num2 o argumentos – obtiene el valor del argumento 2 */ var suma1 = num1 + num2, suma2 = argumentos + argumentos; devuelve "La cantidad obtenida en 1 forma es " + suma1 + "; la suma obtenida por el segundo método es " + suma2; ) /* envía el resultado de la función de suma a la consola 7 - el primer argumento (se puede acceder a él con el nombre num1 o usando argumentos) 4 - el segundo argumento (se puede acceder a él con el nombre num2 o usando argumentos) */ console.log(sum(7,4));

La principal diferencia entre estos métodos es que el primero de ellos le permite acceder solo a aquellos argumentos a los que se les asignaron nombres en la etapa de declaración de la función. El segundo método le permite obtener el valor de cualquier argumento, incluso si no tiene nombre (por número de serie). Esta característica del lenguaje JavaScript le permite crear funciones universales y flexibles.

Además de recibir argumentos, el objeto de argumentos también le permite conocer su número. Esto se hace usando la propiedad de longitud.

Puede iterar sobre los argumentos pasados ​​a la función, por ejemplo, usando para bucle o para... de .

// declaración de función suma función suma() ( var i = 0; console.log("Emite todos los argumentos usando un bucle for"); for (i; i< arguments.length; i++) { console.log(i + 1 + " аргумент равен " + arguments[i]); } console.log("Вывод всех аргументов с помощью цикла for...of"); for (arg of arguments) { console.log(arg); } } // вызов функции sum sum(7, 4, 3, 1);

Una función que muestra en la consola todos los argumentos que se le pasan y su número:

// declaración de función función myFunction () ( var i; console.log("Número de parámetros pasados ​​= " + argumentos.length); // repasemos todos los parámetros usando un bucle for for (i = 0; i< arguments.length; i++) { console.log(i + " параметр = " + arguments[i]); } } // вызовы функции myFunction myFunction(3, 7, 27, "JavaScript"); myFunction(); myFunction("Яблоки", "Груши", "Апельсины");

Una función que realiza la suma de todos los argumentos que se le pasan (su número se desconoce de antemano):

// declaración de función var myCalc = function() ( // repasemos todos los parámetros usando el bucle for var i, sum = 0; for (i = 0; i lt; arguments.length; i++) ( sum += argumentos [i] ) // devuelve la suma como resultado return sum ) // llamada de función (salida a la consola) console.log(myCalc(4, 20, 17, -6));

Como resultado, utilizando el objeto de argumentos puedes implementar lo siguiente en el cuerpo de la función:

• comprobar el número de argumentos pasados;
• procesar cualquier número de parámetros.

Además de la función en sí, otras funciones ubicadas en ella también tienen acceso a los argumentos que se le pasan en la etapa de llamada.

Función mainF(p1, p2) ( function childF() ( console.log("p1 = " + p1 + "; p2 = " + p2); ) childF(); ) mainF(3, 5); // p1 = 3; p2 = 5 principalF(4, 7); // p1 = 4; p2 = 7

Configuración predeterminada

A partir de ECMAScript 2015 (6), un parámetro de función se puede establecer en su valor predeterminado.

Por ejemplo, establezcamos el parámetro "color" en su valor predeterminado, igual a "#009688":

Función setBGColor(color = "#009688") ( document.body.style.backgroundColor = color; ) setBGColor(); // el color de fondo será #009688 setBGColor("rojo"); // el color de fondo será rojo

Antes de ECMAScript 2015, podía establecer el parámetro en su valor predeterminado, por ejemplo, así:

Función setBGColor(color) ( color = color !== indefinido ? color: "#009688"; // establece el color al valor predeterminado de "#009688" document.body.style.backgroundColor = color; )

Parámetros restantes

Si, al llamar a una función, le pasa más argumentos que parámetros, entonces puede obtener los restantes utilizando los llamados parámetros restantes (patámetros restantes). esta oportunidad apareció en el lenguaje a partir de ECMAScript 2015.

// ...nums - los parámetros restantes a los que se puede acceder en en este caso por nombre nums function doMath(mathAction, ...nums) ( var resultado = 0; nums.forEach(función(valor) ( ​​switch (mathAction) ( case "sum": resultado += valor; break; case "sumCube ": resultado += valor**3; ruptura; caso "sumaCuadrado": resultado += valor**2; ruptura: resultado = 0; devolver resultado; 4, 21, -4)); // 24 (3 + 4 + 21 + (-4)) console.log(doMath("sumaCuadrado", 1, 4)); // 17 (1^2 + 4^2) console.log(doMath("sumCube", 3, 2, 4)); // 99 (3^3 + 2^3 + 4^3)

declaración de devolución

La declaración de devolución está destinada a devolver un valor o el resultado de evaluar una expresión. función actual. El valor o expresión debe estar separado del retorno por un espacio. Además, la declaración de retorno detiene la ejecución de la función, es decir todas las instrucciones siguientes no se ejecutarán.

Una función en JavaScript siempre devuelve un resultado, independientemente de si se utiliza una declaración de devolución o no.

// función que devuelve el resultado function sayWelcome (userFirstName, userLastName) ( if ((!userFirstName) || (!userLastName)) return "Bienvenido, usuario anónimo"; else return "Bienvenido, " + userLastName + " " + userFirstName ; ) // declaración de variable persona var persona; // asigna el resultado de la función decirBienvenido a la variable persona persona = decirBienvenido("Ivan","Ivanov"); // imprime el valor de la variable en la consola console.log(person); //Instrucción que enviará a la consola el resultado de la función sayWelcome console.log(sayWelcome("Petr","Petrov")); //Instrucción que enviará a la consola el resultado de la función sayWelcome console.log(sayWelcome("Sidorov"));

JavaScript: función con verificación de parámetros

// 1. función que no devuelve ningún resultado function sayWelcome (userFirstName, userLastName) ( console.log("Welcome, " + userLastName + " " + userFirstName); ) // intentemos obtener el resultado de una función que sí lo hace no devuelve nada console .log(sayWelcome("Ivan", "Ivanov")); // 2. función que contiene una declaración de retorno sin un valor function sayDay (día) ( día = "Hoy", + día; return; //esta instrucción no se ejecutará porque viene después de la declaración de retorno console.log(día) ; ) // intentemos obtener el resultado de una función que contiene una declaración de devolución sin valor console.log(sayDay("21 de febrero de 2016"));

JavaScript: obtiene valor de una función que no devuelve nada

Se obtendrá el mismo resultado si la declaración de devolución no especifica un valor de retorno.

Sobrecarga de funciones en JavaScript La sobrecarga de funciones en programación es la capacidad de declarar varias funciones con los mismos nombres en el mismo alcance. Estas funciones se diferencian entre sí por el tipo y número de argumentos. Cada función tiene su propia lógica del programa

. La sobrecarga de funciones se utiliza para que se puedan realizar acciones similares usando un solo nombre de función. El lenguaje JavaScript no admite la sobrecarga de funciones de la misma manera que se implementa, por ejemplo, en C. idiomas similares

. Aquellos. En JavaScript, no puede crear varias funciones con los mismos nombres que estén en el mismo ámbito.

• Se puede implementar una funcionalidad similar en JavaScript siguiendo los siguientes pasos:
• Para verificar si un argumento se pasa o no, use una condición que verifique su valor en busca de indefinido.
• Para verificar la cantidad de argumentos pasados ​​a una función, use la propiedad de longitud de argumentos del objeto.
• Para averiguar el tipo de valor del argumento pasado, utilice los operadores tipo de o instancia de. para trabajar con numero variable
• argumentos, utilice el objeto argumentos.

A partir de ECMAScript6, puede especificar valores predeterminados para los argumentos.

Por ejemplo, creemos una función que se pueda llamar con uno o dos argumentos: //declaración de una función que cambia de color función de elementos setBgColor(bgColor,elementos) ( //si el parámetro de elementos no se especifica al llamar a if (elementos=== undefinido) ( //luego establece su valor en "div" elementos = "div"; ) //obtener todo elementos elementos = $(elementos); // iterar a través de todos los elementos y establecerlos en el color de fondo especificado elementos.cada uno(función())( $(this).css("fondo-color",bgColor); )) / *Llame a la función setBgColor, especificando un parámetro. Porque 2 no se especifica, entonces esta función cambiará el color de fondo de todos los elementos div.*/ setBgColor("green"); /*Llame a la función setBgColor, especificando 2 parámetros. Porque Se especifica 2 parámetros, luego

esta función

cambiará el color de fondo de los elementos del botón únicamente.*/ setBgColor("#ff0000","button");

Hagamos algunos cambios en el código anterior. Es decir, especificamos el valor predeterminado para el segundo parámetro:

//declaración de una función que cambia el color de fondo de los elementos //el parámetro elementos tiene el valor "div" por defecto function setBgColor(bgColor,elements = "div") ( //obtener todos los elementos elementos = $(elementos); //iterar todos los elementos y establecerlos en el color de fondo especificado elements.each(function())( $(this).css("background-color",bgColor); ) ) //llamar a la función setBgColor, especificando un parámetro setBgColor("verde"); //llama a la función setBgColor, especificando 2 parámetros setBgColor("#ff0000","button");

Un ejemplo de cómo en JavaScript se puede implementar una función "sobrecargada" que calcula la cantidad de calorías que una persona necesita por día:

// descripción de la función función countCal(sexo, altura) ( // parámetros: sexo (sexo) y altura (altura) var resultado; if ((sexo === 0) || (sexo === "hombre") ) ( resultado = (altura - 100) * 20; ) else if ((sexo === 1) || (sexo === "mujer")) ( resultado = (altura - 105) * 19; ) if (resultado ) ( // argumentos - nivel de actividad if (argumentos) ( resultado *= argumentos; ) console.log("Cantidad de kcal para la vida normal: " + resultado) else ( console.log("Parámetros incorrectos"); ) ) / * llamar a una función y pasarle 2 argumentos (1 - "hombre", se puede acceder usando el nombre sexo y argumentos; 2 - el valor 185, se puede acceder usando el nombre sexo y argumentos) */ countCal("man ", 185); /* llamar a una función y pasarle 3 parámetros, aunque solo 2 están presentes en la descripción de la función (en este caso, puede obtener el valor del tercer parámetro solo como argumento) */ countCal(0, 185, 2);

Generalmente se llama a una función dependiendo de cómo se declara por nombre o por una variable que contiene una referencia a la función.

Función fact(n) ( if (n === 1) ( return 1; ) return fact(n-1) * n; ) console.log(fact(5)); // 120

Puede llamar a una función dentro de su cuerpo no solo por su nombre, sino también usando la propiedad del destinatario del objeto de argumentos. Pero esta propiedad Es mejor no usarlo, porque... está desactualizado. Además, en modo estricto no funciona en absoluto.

¿Qué son las funciones integradas (estándar)?

JavaScript tiene un enorme conjunto de funciones integradas (estándar). Estas funciones ya están descritas en el propio motor del navegador. Casi todos ellos son métodos de un objeto u otro.

Por ejemplo, para llamar a la alerta de función (método) incorporada, no es necesario declararla primero. Ya está descrito en el navegador. Llamar método de alerta se realiza especificando un nombre, paréntesis y un argumento dentro de ellos. este método diseñado para mostrar un mensaje en la pantalla en forma de cuadro de diálogo. mensaje de texto se toma del valor del parámetro de esta función.

// llamando a la función de alerta alert("Algún texto");

JavaScript: llamar a la función de alerta

Una función es un código de programa que se define una vez y luego se puede llamar para su ejecución cualquier número de veces. EN Función JavaScript

es un valor, por lo que puede asignarse a variables, elementos de matriz, propiedades de objetos, pasarse como argumento a funciones y devolverse como valor de funciones.

Declarar y llamar a una función

Hay tres formas de declarar una función: declaración de función, expresión de función y expresión de función nombrada.

La declaración de función (abreviada como FD) es una declaración de función "clásica". En JavaScript, las funciones se declaran mediante un literal de función. Sintaxis de declaración FD:

Un literal de función consta de las siguientes cuatro partes:

La palabra clave es función.

Un identificador obligatorio que especifica el nombre de la función. Generalmente se elige un verbo como nombre de función porque la función realiza una acción.

Un par de paréntesis alrededor de una lista de cero o más identificadores, separados por comas. Estos identificadores se denominan parámetros de función.

El cuerpo de una función, que consta de un par de llaves que contienen instrucciones. El cuerpo de la función puede estar vacío, pero siempre se deben incluir llaves.

Ejemplo sencillo:

Cuando encuentra la palabra clave function, el intérprete crea una función y luego le asigna una referencia a una variable llamada sayHi (el intérprete crea automáticamente una variable con este nombre).

Al acceder a la variable sayHi, puede ver que hay una función allí como valor (de hecho, un enlace a ella):

Alerta(di Hola); // función decirHola() (alerta("Hola"); )

Una expresión de función (abreviada como FE) es una declaración de función que forma parte de una expresión (como una asignación). Sintaxis de declaración FE:

Función (parámetros) (instrucciones)

El cuerpo de una función, que consta de un par de llaves que contienen instrucciones. El cuerpo de la función puede estar vacío, pero siempre se deben incluir llaves.

Var decirHola = función () (alerta("Hola"); );

La función FE también se denomina "función anónima".

Una expresión de función nombrada (NFE para abreviar) es una declaración de función que forma parte de una expresión (como una asignación). Sintaxis de declaración NFE:

Identificador de función (parámetros) (instrucciones)

El cuerpo de una función, que consta de un par de llaves que contienen instrucciones. El cuerpo de la función puede estar vacío, pero siempre se deben incluir llaves.

Var decirHola = función foo() (alerta("Hola"); );

El intérprete procesa las declaraciones FE y NFE exactamente de la misma manera que una declaración FD: el intérprete crea una función y almacena una referencia a ella en la variable sayHi.

código de programa, ubicado en el cuerpo de la función, no se ejecuta en el momento en que se declara la función, sino en el momento en que se llama. Para llamar a una función, use el operador () (llamada a función):

Función decirHola() ( alerta("Hola"); ) var decirHola2 = función () ( alerta("Hola2"); ); var sayHi3 = función foo() (alerta("Hola3"); ); decir Hola(); // "Hola" decirHola2(); // "Hola2" decirHola3(); // "Hola3"

La diferencia entre las tres declaraciones presentadas es que las funciones declaradas como FD son creadas por el intérprete antes de que el código comience a ejecutarse (en la etapa de análisis), por lo que pueden ser llamadas (en el ámbito donde se declaran) antes de la declaración:

// Llamar a una función antes de declararla en el código de nivel superior foo(); función foo() ( alerta("Llamar a la función foo() en área global visibilidad."); // Llamar a una función antes de que se declare en el alcance de la barra de funciones(); barra de funciones() ( alert("Llamar a la barra de funciones() en el alcance de la función."); ) )

Las funciones declaradas como FE o NFE se crean en tiempo de ejecución, por lo que solo se pueden llamar después de haber sido declaradas:

// decir Hola(); // Error. La función sayHi aún no existe var sayHi = function () ( alert("¡Hola!"); ); decir Hola();

Las funciones declaradas dentro de un bloque están dentro del alcance del bloque:

// foo(); // Error. La función no está declarada. ( foo(); // 1 función foo() ( console.log(1); ) ) foo(); // Error. La función no está declarada.

A diferencia de FE, una función declarada como NFE tiene la capacidad de referirse a sí misma por su nombre cuando se la llama de forma recursiva. El nombre de la función sólo está disponible dentro de la propia función:

(función decirHola(cadena) (if (cadena) (retorno;) decirHola("hola"); // El nombre está disponible dentro de la función))(); decir Hola(); // Error. Función no declarada

Función de devolución de llamada

Una función de devolución de llamada es una función que se pasa como argumento a otra función para ser llamada más tarde.

Las funciones de devolución de llamada se utilizan a menudo como controladores de eventos.

A continuación se muestra un ejemplo de una función que toma como argumento una referencia a otra función para su posterior llamada:

Función foo(devolución de llamada) ( devolver devolución de llamada(); ) foo (función() (alerta("¡Hola!"); ));

Este ejemplo demuestra claramente cómo funciona una devolución de llamada.

Las funciones de JavaScript le permiten organizar scripts y simplificar reutilizar código. En lugar de crear largos fragmentos de código repartidos por una página HTML, los scripts se organizan en grupos lógicos.

Declarar y llamar a una función de JavaScript

La sintaxis de la función JavaScript es la siguiente:

función ""nombre"" (""argumento1"", ""argumento2"", ""argumento3""...) (""operadores"" devuelve ""valor"")

El nombre determina cómo llamaremos a la función cuando la llamemos. Los argumentos especifican los valores que se pasan a la función para su procesamiento. La sección de declaraciones representa el cuerpo de la función que realiza el procesamiento. La declaración de devolución opcional le permite devolver un valor.

El siguiente ejemplo muestra una función definida en la sección de una página HTML y llamada en la sección:

función decirHola() (alerta("¡Hola!"); ) decirHola();

Pasar argumentos a una función

En el ejemplo anterior (tipo de script texto javascript function ) no se pasan argumentos a la función. Normalmente una función está diseñada para realizar alguna acción con varios argumentos:

Un ejemplo simple de una función de JavaScript función decirHola(día, mes) (alerta("¡Hola! Hoy es " + día + " " + mes); ) decirHola("24", "julio"); decirHola("1", "agosto"); decirHola("24", "mayo");

en esto Ejemplo de JavaScript La función de devolución de llamada se llama varias veces y toma argumentos que luego se usan para crear la cadena que se muestra en el cuadro de diálogo. Para hacer esto sin la función, tendrías que repetir el script de la sección tres veces. Obviamente, usar una función es un enfoque más eficiente.

Devolver un valor de una función

La declaración de retorno se usa para devolver un valor de una función y usarlo en el lugar donde se llama a la función. Como ejemplo, declararemos una función que suma dos argumentos y devuelve el resultado:

Un ejemplo simple de función JavaScript var resultado = addValues(10, 20) document.write("Resultado = " + resultado);

En el ejemplo anterior, pasamos los valores 10 y 20 a la función addValues. La función addValues ​​suma estos dos valores y devuelve el resultado. La declaración de retorno asigna el resultado a la variable de resultado, que luego se usa para crear una cadena que se imprime en la página HTML.

La llamada a la función JavaScript se puede realizar en diferentes lugares. Por ejemplo, no es necesario asignar el resultado como valor de una variable. Puede usarlo directamente como argumento al llamar a document.write.

Es importante tener en cuenta que una función sólo puede devolver un valor:

Un ejemplo simple de una función de JavaScript addValues(valor1, valor2) ( valor de retorno1 + valor2; ) document.write("Resultado = " + addValues(10, 20)); La función JavaScript onclick también se puede utilizar en expresiones condicionales< 20"); }

. Por ejemplo: un ejemplo simple de una función de JavaScript addValues(valor1, valor2) ( valor de retorno1 + valor2; ) if (addValues(10, 20) > 20) ( document.write("Resultado > 20"); ) else ( documento.write ( "Resultado

Dónde colocar declaraciones de funciones Hay dos lugares donde se recomienda colocar Declaraciones de JavaScript retorno de función: dentro de una sección de un documento HTML o dentro archivo externo

.js. La segunda opción se considera la ubicación preferida, ya que proporciona la mayor flexibilidad.

El objetivo de crear funciones es hacerlas lo más generales posible para maximizar la reutilización.

La traducción del artículo “Comprensión de las funciones de JavaScript” fue preparada por el amigable equipo del proyecto.

Bueno Malo

La idea de generar contenido dinámicamente en un recurso web se ha convertido en la norma. Las páginas estáticas y la creación de sitios web con plantillas finalmente han completado su misión.

Sin embargo, un recurso web moderno no necesariamente tiene que estar representado por un conjunto de páginas generadas por el servidor y actualizadas por el navegador (JS+AJAX). Cuando llega un visitante, un recurso web puede consistir en un par de encabezados para el protocolo, algo de texto en el "encabezado", unas pocas líneas de código en el "cuerpo" y listo. El resto " se le ocurrirá una idea

”durante la experiencia del visitante: este es un sitio ideal o aspira a serlo.

JavaScript es una experiencia adquirida durante muchas décadas. Él tiene historia significativa desarrollo, un equipo moderno y calificado de creadores y desarrolladores. El lenguaje está bien pensado, es confiable, hermoso y brinda una oportunidad real para que los desarrolladores escriban código decente y se mejoren.

En principio, aquí no existe el concepto de algoritmo fuera de una función. Por supuesto, el desarrollador puede insertar un script en cualquier lugar de la página, colocar el código en él y se ejecutará. Pero, ¿cuál es el punto del código que se ejecuta solo una vez: cuando se carga (recarga) la página? A menos que sea posible establecer los valores iniciales de algunas variables sin importancia.

Un script es un lugar para describir las variables y funciones necesarias, en lugar de un buen fragmento de código escrito por sí mismo. Es el conjunto de funciones lo esencial y significativo, tal vez su mutua comunicación directa, pero más a menudo sucede de manera diferente. El lugar donde se describe una función y el lugar donde se aplica no son en absoluto lo mismo.

No es en absoluto necesario que una función llame a otra función directamente; puede hacerlo indirectamente mediante la generación de código dinámico. El visitante toma una decisión en el marco de este código y se activa un sistema de funciones completamente diferente.

Dinámica funcional

La dinámica funcional no son solo ni tanto los controladores asignados a los elementos de la página, son las funciones que forman los elementos de la página, y los controladores directos también pueden cambiar.

La acción en la página se desarrolla en función de sus elementos y del comportamiento del visitante en la misma. Los movimientos del mouse, los botones del teclado, los clics, los eventos de elementos y otras circunstancias conducen al lanzamiento de las funciones necesarias.

Inicialmente no hay secuencia ni paralelismo. Existe una adecuada respuesta del recurso web a los eventos. La rapidez con la que JavaScript realizará una función particular depende de muchos aspectos técnicos (computadoras, líneas de comunicación) y semánticos (lógica de algoritmos, área temática, significado de la tarea) factores.

De hecho, se puede decir que algo funcionó en paralelo y que algo se cumplirá después de algo, pero esto no tiene ningún significado particular. Es importante que las funciones de JavaScript brinden la capacidad de crear una respuesta adecuada a las acciones de los visitantes.

Esta es una nueva forma de pensar en desarrollo: ¡procesamiento distribuido de información en las entrañas de un solo navegador!

Sintaxis de variables y funciones

Las variables de JavaScript se colocan tanto en la etiqueta "script" como en el cuerpo de la función. Las funciones se definen de la misma manera. No tiene ningún sentido particular escribir otra función dentro de una función, pero esto puede ser necesario por varias razones bien fundadas.

Descripción de la función en caso general comienza con la palabra clave "función", seguida de su nombre, una lista de argumentos entre paréntesis separados por comas y el cuerpo de la función entre llaves.

Una función es un código de programa que se define una vez y luego se puede llamar para su ejecución cualquier número de veces. en este ejemplo Se describen dos funciones que proporcionan intercambio AJAX entre la página y el servidor. La variable scXHR se describe arriba, por lo que está disponible tanto en InitXML como dentro de WaitReplySC.

Nombre de la función y parámetro "función"

Fue presentado aquí opción asincrónica cuando se llama a la función JavaScript en la función después de que el servidor haya respondido. Al mismo tiempo, después de recibir una respuesta del servidor, WaitReplySC accede a las etiquetas de la página, las llena con la información recibida y llama a otras funciones que bien pueden iniciar la siguiente solicitud al servidor.

También es importante señalar aquí que WaitReplySC es una función. Pero en la fila scXHR.onreadystatechange = EsperarRespuestaSC se pasa como parámetro. Este regla general pasar funciones a otras funciones como parámetros. Especifique corchetes y páseles sus parámetros; la función se ejecutará inmediatamente. Sólo me dio su nombre, pero ¿y qué? La llamada a la función la realizará quien recibió su nombre.

La funcionalidad implementada a través de AJAX le permite realizar una llamada a una función de JavaScript a través de los datos recibidos del servidor. De hecho, al enviar una solicitud al servidor, es posible que una función particular no “sepa” en absoluto a qué función está accediendo y con qué información.

Salida de función y su resultado.

En el cuerpo de la función, puede escribir cualquier operador del lenguaje que, de hecho, está diseñado para este propósito. Las variables definidas dentro y fuera de una función están disponibles dentro de una función, pero no las definidas en otras funciones.

Si desea que una función devuelva un resultado, puede utilizar la declaración de devolución de JavaScript: return. Puede haber una cantidad suficiente de declaraciones de devolución en el cuerpo de la función. No es necesario en absoluto que todos devuelvan el mismo tipo de resultado.

Normalmente, los desarrolladores respetan mucho esta función y, según la situación, deciden cerrarla lo antes posible.

No es necesario recorrer todo el algoritmo de la función cuando se puede salir antes.

Argumentos de función

Los argumentos de una función se pasan como una lista separada por comas, entre paréntesis y ubicada inmediatamente después de su nombre. Los nombres de las variables se utilizan como argumentos, pero los valores también se pueden pasar directamente. Para pasar una función a una función en JavaScript, solo necesita especificar su nombre sin paréntesis.

Dentro de la función está disponible la variable argumentos, que tiene la propiedad de longitud. Puedes acceder a cualquier argumento de función a través de argumentos, argumentos,... hasta los últimos argumentos.

Cambiar el argumento de una función es válido dentro de la función, pero no fuera de ella. Para cambiar algo fuera de la función, necesita usar Operador de JavaScript retorno por el que pasar valor requerido afuera.

Una vez completada la función, todo lo asociado con su ejecución será destruido. Durante la ejecución, una función puede cambiar variables externas, excepto las descritas en otras funciones, incluidas las internas.

argumentos tiene una propiedad de destinatario, que se utiliza para llamar a una función, lo cual se realiza en en este momento tiempo. Si te llamas a ti mismo, entonces Opción de JavaScript una función dentro de una función le permitirá implementar la recursividad.

Usando funciones

La principal preocupación de las funciones es servir eventos del navegador. Para ello, en casi todas las etiquetas es posible especificar el nombre del evento y la función que lo procesa. Se pueden especificar varios eventos, pero solo se especifica una función por evento.

Una función puede servir a múltiples elementos de página y múltiples eventos. Usando el parámetro "este", puede pasar información a la función desde donde se llamó.

Un uso clásico de las funciones JS son los controladores de eventos en elementos. En este ejemplo, se llamará a la función scfWecomeGo() o scfWelcomeCancel() en el formulario de inicio/cierre de sesión del visitante, y a scfMenuItemClick(this) al seleccionar el modo de funcionamiento.

En el último caso, se pasa el parámetro "este", que le permite descubrir milagrosamente de qué div proviene la llamada. En general, JavaScript está muy bien implantado en el DOM y le permite navegar cómodamente a través de sus elementos, recopilar información necesaria esa dinámica de la página puede ser simplemente impredecible.

Una función no tiene por qué devolver una cadena de caracteres, un número u otra función. Puede devolver un elemento HTML completo, que contendrá la cantidad requerida de elementos, con sus propios controladores de eventos.

Al colocar dicho elemento en la página, el desarrollador crea una nueva funcionalidad, que es buena en términos de resolver el problema y satisfacer los intereses de los visitantes, pero bastante difícil en términos de implementación.

Al iniciar un desarrollo con todas las funciones como este, es fácil confundirse. código propio, en llamadas a funciones, en momentos en los que se forma tal o cual contenido de tal o cual parte de la página. Antes de tomar esta dirección de desarrollo, no está de más sopesarlo todo cuidadosamente.

Sobre el pensamiento distribuido

El desarrollador debe pensar en el nivel de todos los elementos de la página, en el nivel de todos los eventos y tener una idea clara de cómo sucede todo realmente. Es difícil, pero el trabajo vale la pena.

Una función es un código de programa que se define una vez y luego se puede llamar para su ejecución cualquier número de veces. Ejecución de JavaScript las funciones se pueden posponer hasta algún evento, y puede haber muchas funciones de este tipo, y los eventos tienden a extenderse y caer en el "ámbito de visibilidad" de varios controladores.

En este ejemplo, se llamó a una función en algún lugar anterior que inició la creación de un elemento del menú de navegación de archivos. Supuesto organización de la página, es decir, solo hay siete archivos en la ventana que se pueden eliminar y procesar. Puede navegar haciendo clic en una línea del archivo, usando las flechas del teclado o en bloques de siete líneas.

Cada caso tiene sus propias funciones. En otras palabras, en tal ejemplo sencillo necesita escribir un par de docenas de funciones que responderán a varios eventos, y algunas de estas funciones procesarán varias opciones y situaciones que no son eventos en absoluto.

Por ejemplo, cuando eliminas una fila, las inferiores deberían subir. Para hacer esto, necesitará hacer una nueva selección, que es trivial y requiere muchos recursos, o recalcular las líneas, usar funciones de matriz en JavaScript y lograr el objetivo con elegancia.

Argumentos y resultados de funciones

JavaScript le permite llevar su código a un estado "completamente funcional". Es normal que el argumento de una función sea una función. Se permite una opción cuando la función devuelve una función. JavaScript está completamente relajado al respecto.

Este es un buen mecanismo, pero bastante complejo en términos de implementación. Técnicamente todo está permitido; sólo un desarrollador cualificado puede proporcionar semánticamente la lógica para transferir la "funcionalidad".

Cuando en JavaScript hay una función dentro de una función todo va bien, pero cuando una función genera una función, y esa genera otra, entonces es bastante difícil seguir la lógica. Básicamente, no se trata de aplicar la calificación, se trata de obtener un resultado correcto y seguro.

La preocupación del desarrollador es clara y sencilla. Hay un problema, necesitas una solución, no un error como “Error de JavaScript la operación es insegura”, pantalla en blanco o detener todo el motor del navegador.

Si el argumento es una función, entonces el desarrollador está pasando una variable con propiedades especiales, es decir, no es un número, ni una cadena, ni un objeto. Pero el uso de un argumento de este tipo puede provocar que las variables externas cambien y que se ejecute el resultado de la función. Dependiendo de lo que se transmita se harán los cambios adecuados.

Ejecución del código generado.

Puede implementar la ejecución del código generado durante la operación de otro código usando "eval". no cuenta gran solución, pero a menudo no puedes complicar el código con funciones innecesarias, sino limitarte a la formación banal cadenas de javascript código y simplemente ejecutarlo.

En este ejemplo, se genera una línea para insertar información en el div actual. El número de div y el contenido de la información son diferentes para diferentes posiciones, por lo que no se garantiza que dicha solución en esta situación garantice la situación " error de javascript la operación es insegura", pero dará de manera confiable el efecto deseado.

Un matiz del paradigma de “función dentro de una función” de JavaScript

Si existe la oportunidad de prescindir de lujos, es mejor aprovecharla. Todas las opciones enumeradas son buenas. Por supuesto, en muchos casos ésta es la única solución.

Un ejemplo clásico de recursividad: cálculo factorial. Es bastante difícil escribir un algoritmo que entre en un bucle, pero es muy fácil ir más allá de los límites del valor. El factorial está creciendo demasiado rápido.

Sin embargo, tanto la recursividad como una función que llama a otra función pueden representar una solución razonable. llamar de vuelta- la norma de las cosas.

Por ejemplo, una mesa normal. Puede haber otras tablas en la tabla. El anidamiento no se puede limitar. Escribir su propio conjunto de funciones para cada tabla es demasiado lujo.

Hay muchos ejemplos de este tipo que se pueden dar, y todos serán tareas reales y urgentes, en absoluto del campo de la programación. Por eso el problema radica precisamente en que el sistema de funciones creado, o más bien su depuración y posterior operación confiable se convierte en una preocupación no para JavaScript, sino para el desarrollador.