Вызов функции javascript из html. Пять способов вызвать функцию

Функция - это программный код, который определяется один раз и затем может вызываться на выполнение любое количество раз.

В JavaScript функция является значением, поэтому её можно присваивать переменным, элементам массива, свойствам объектов, передавать в качестве аргумента функциям и возвращать в качестве значения из функций.

Существует три способа объявления функции: Function Declaration, Function Expression и Named Function Expression.

Function Declaration (сокращённо FD) – это "классическое" объявление функции. В JavaScript функции объявляются с помощью литерала функции. Синтаксис объявления FD:

Литерал функции состоит из следующих четырёх частей:

Простой пример:

Function sayHi() { alert("Hello"); }

Встречая ключевое слово function интерпретатор создаёт функцию и затем присваивает ссылку на неё переменной с именем sayHi (переменная с данным именем создаётся интерпретатором автоматически).

Обратившись к переменной sayHi можно увидеть, что в качестве значения там находится функция (на самом деле ссылка на неё):

Alert(sayHi); // function sayHi() { alert("Hello"); }

Function Expression (сокращённо FE) – это объявление функции, которое является частью какого-либо выражения (например присваивания). Синтаксис объявления FE:

Function (параметры) { инструкции }

Простой пример:

Var sayHi = function () { alert("Hello"); };

Функцию FE иначе ещё называют "анонимной функцией ".

Named Function Expression (сокращённо NFE) – это объявление функции, которое является частью какого-либо выражения (например присваивания). Синтаксис объявления NFE:

Function идентификатор (параметры) { инструкции }

Простой пример:

Var sayHi = function foo() { alert("Hello"); };

Объявления FE и NFE обрабатываются интерпретатором точно так же, как и объявление FD: интерпретатор создаёт функцию и сохраняет ссылку на неё в переменной sayHi.

Программный код, расположенный в теле функции, выполняется не в момент объявления функции, а в момент её вызова. Для вызова функции используется оператор () (вызов функции):

Function sayHi() { alert("Hello"); } var sayHi2 = function () { alert("Hello2"); }; var sayHi3 = function foo() { alert("Hello3"); }; sayHi(); // "Hello" sayHi2(); // "Hello2" sayHi3(); // "Hello3"

Разница между представленными тремя объявлениями заключается в том, что функции, объявленные как FD, создаются интерпретатором до начала выполнения кода (на этапе анализа), поэтому их можно вызывать (в той области видимости где они объявлены) до объявления:

// Вызов функции до её объявления в коде верхнего уровня foo(); function foo() { alert("Вызов функции foo() в глобальной области видимости."); // Вызов функции до её объявления в области видимости функции bar(); function bar() { alert("Вызов функции bar() в области видимости функции."); } }

Функции, объявленные как FE или NFE, создаются в процессе выполнения кода, поэтому их можно вызывать только после того как они объявлены:

// sayHi(); // Ошибка. Функция sayHi ещё не существует var sayHi = function () { alert("Hello!"); }; sayHi();

Функции, объявленные внутри блока, находятся в блочной области видимости:

// foo(); // Ошибка. Функция не объявлена. { foo(); // 1 function foo() { console.log(1); } } foo(); // Ошибка. Функция не объявлена.

В отличие от FE, функция, объявленная как NFE, имеет возможность обращаться к себе по имени при рекурсивном вызове. Имя функции доступно только внутри самой функции:

(function sayHi(str) { if (str) { return; } sayHi("hi"); // Имя доступно внутри функции })(); sayHi(); // Ошибка. Функция не объявлена

Функция обратного вызова – это функция, которая передаётся в качестве аргумента другой функции для последующего её вызова.

Функции обратного вызова часто используются, в качестве обработчиков событий.

Ниже приведён пример функции, принимающей в качестве своего аргумента ссылку на другую функцию для её последующего вызова:

Function foo(callback) { return callback(); } foo (function() { alert("Hello!"); });

Этот пример наглядно демонстрирует принцип действия обратного вызова.

Последнее обновление: 09.04.2018

Функции представляют собой набор инструкций, выполняющих определенное действие или вычисляющих определенное значение.

Синтаксис определения функции:

Function имя_функции([параметр [, ...]]){ // Инструкции }

Определение функции начинается с ключевого слова function , после которого следует имя функции. Наименование функции подчиняется тем же правилам, что и наименование переменной: оно может содержать только цифры, буквы, символы подчеркивания и доллара ($) и должно начинаться с буквы, символа подчеркивания или доллара.

После имени функции в скобках идет перечисление параметров. Даже если параметров у функции нет, то просто идут пустые скобки. Затем в фигурных скобках идет тело функции, содержащее набор инструкций.

Определим простейшую функцию:

Function display(){ document.write("функция в JavaScript"); }

Данная функция называется display() . Она не принимает никаких параметров и все, что она делает, это пишет на веб-страницу строку.

Однако простого определения функции еще недостаточно, чтобы она заработала. На надо еще ее вызвать:

function display(){ document.write("функция в JavaScript"); } display();

Необязательно давать функциям определенное имя. Можно использовать анонимные функции:

Var display = function(){ // определение функции document.write("функция в JavaScript"); } display();

Фактически мы определяем переменную display и присваиваем ей ссылку на функцию. А затем по имени переменной функция вызывается.

Также мы можем динамически присваивать функции для переменной:

Function goodMorning(){ document.write("Доброе утро"); } function goodEvening(){ document.write("Добрый вечер"); } var message = goodMorning; message(); // Доброе утро message = goodEvening; message(); // Добрый вечер

Рассмотрим передачу параметров:

Function display(x){ // определение функции var z = x * x; document.write(x + " в квадрате равно " + z); } display(5); // вызов функции

Функция display принимает один параметр - x. Поэтому при вызове функции мы можем передать для него значение, например, число 5, как в данном случае.

Если функция принимает несколько параметров, то с помощью spread-оператора... мы можем передать набор значений для этих параметров из массива:

Function sum(a, b, c){ let d = a + b + c; console.log(d); } sum(1, 2, 3); let nums = ; sum(...nums);

Во втором случае в функцию передается числа из массива nums. Но чтобы передавался не просто массив, как одно значение, а именно числа из этого массива, применяется spread-оператор (многоточие...).

Функция может принимать множество параметров, но при этом часть или все параметры могут быть необязательными. Если для параметров не передается значение, то по умолчанию они имеют значение "undefined".

Function display(x, y){ if(y === undefined) y = 5; if(x === undefined) x = 8; let z = x * y; console.log(z); } display(); // 40 display(6); // 30 display(6, 4) // 24

Здесь функция display принимает два параметра. При вызове функции мы можем проверить их значения. При этом, вызывая функцию, необязательно передавать для этих параметров значения. Для проверки наличия значения параметров используется сравнение со значением undefined .

Есть и другой способ определения значения для параметров по умолчанию:

Function display(x = 5, y = 10){ let z = x * y; console.log(z); } display(); // 50 display(6); // 60 display(6, 4) // 24

Если параметрам x и y не передаются значения, то они получаются в качестве значений числа 5 и 10 соответствено. Такой способ более лаконичен и интуитивен, чем сравнение с undefined.

При этом значение параметра по умолчанию может быть производным, представлять выражение:

Function display(x = 5, y = 10 + x){ let z = x * y; console.log(z); } display(); // 75 display(6); // 96 display(6, 4) // 24

В данном случае значение параметра y зависит от значения x.

При необходимости мы можем получить все переданные параметры через глобально доступный массив arguments :

Function display(){ var z = 1; for(var i=0; i