javascript для чайников скачать задачи для начинающих

Содержание скрыть

1.1 4.1.1. Возвращаемые Аргументы и значения

Функции

При разработке сложного приложения очень принято снова и снова использовать одни и те же инструкции. Скрипт для магазина электронной коммерции, например, вы должны рассчитать общую цену продуктов несколько раз, чтобы добавить налоги и стоимость доставки.Когда ряд инструкций повторяется снова и снова, исходный код приложения становится слишком сложным, так как:

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

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

В следующем примере инструкции, которые суммируют два числа и отображают сообщение с результатом, повторяются снова и снова:
результат;

numero1 = ;
numero2 = 5;

/ / Числа суммируются и отображается результат
результат = число1 + число2;
alert(«результат « + «результат);

число1 = 10;
число2 = 7;

/ / Числа суммируются и отображается результат
результат = число1 + число2;
alert(«результат « + «результат);

число1 = 5;
число2 = 8;

/ / Числа суммируются и отображается результат
результат = число1 + число2;
alert(«результат « + «результат);
…
Хотя это очень простой пример, кажется очевидным, что повторение одних и тех же инструкций по всему коду не рекомендуется. Решение, предлагаемое функциями, состоит в том, чтобы извлечь повторяющиеся инструкции и заменить их инструкцией типа «на данный момент выполняются извлеченные инструкции»:

var результат;

var numero1 = 3;
var numero2 = 5;

/* На этом этапе вызывается функция, которая суммирует
 2 числа и показывает результат */

число1 = 10;
число2 = 7;

/* На этом этапе вызывается функция, которая суммирует
 2 числа и показывает результат */

число1 = 5;
число2 = 8;

/* На этом этапе вызывается функция, которая суммирует
 2 числа и показывает результат */
...

Чтобы решение в приведенном выше примере было действительным, общие инструкции должны быть сгруппированы в функцию, в которую можно указать числа, которые необходимо суммировать перед отображением сообщения.

Таким образом, в первую очередь вы должны создать основную функцию с общими инструкциями. Функции в JavaScript определяются зарезервированным словомfunction, за которым следует имя функции. Его формальное определение выглядит следующим образом:

function nombre_funcion() {
 ...
}

Имя функции используется для вызова этой функции, когда это необходимо. Концепция такая же, как и с переменными, которым присваивается уникальное имя, чтобы их можно было использовать в коде. После имени функции включены две круглые скобки, значение которых подробно описано ниже. Наконец, символы {и }используются для закрытия всех инструкций, принадлежащих функции (аналогично тому, как инструкции заключены в структурах ifили for).

Возвращаясь к приведенному выше примеру, создается функция, вызываемая suma_y_muestraследующим образом:

function suma_y_muestra() {
 результат = число1 + число2;
 alert("результат " + "результат);
}

Хотя вышеуказанная функция правильно создана , она не работает так, как должна, поскольку в ней отсутствуют «аргументы», которые объясняются в следующем разделе. После создания функции из любой точки кода функция может быть вызвана для выполнения ее инструкций (в дополнение к «вызову функции»также обычно используется выражение «вызов функции»).

Вызов функции выполняется просто указанием ее имени, включая конечные скобки и символ ;для завершения инструкции:

function suma_y_muestra() {
 результат = число1 + число2;
 alert("результат " + "результат);
}

var результат;

var numero1 = 3;
var numero2 = 5;

сума_и_метра();

число1 = 10;
число2 = 7;

сума_и_метра();

число1 = 5;
число2 = 8;

сума_и_метра();
...

Код в приведенном выше примере намного эффективнее, чем первый код, который был показан, поскольку нет повторяющихся инструкций. Инструкции, которые суммируют и отображают сообщения, были сгруппированы под функцией, что позволяет запускать их в любой точке программы, просто указав имя функции.

Единственное, чего не хватает в приведенном выше примере для правильной работы, — это возможность указать функции числа, которые она должна суммировать. Когда данные должны быть переданы функции, используются «аргументы», как описано в следующем разделе.

4.1.1. Возвращаемые Аргументы и значения

Самые простые функции не нуждаются в какой-либо информации для получения результатов. Однако большинство функций реальных приложений должны получить доступ к значению некоторых переменных для получения результатов.

Переменные, которые нужны функциям, называются аргументами. Прежде чем вы сможете их использовать, функция должна указать, сколько аргументов вам нужно и каково имя каждого аргумента. Кроме того, при вызове функции должны быть включены значения, которые будут переданы функции. Аргументы указаны в круглых скобках, которые идут за именем функции и разделены запятой (,).

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

function suma_y_muestra(primerNumero, segundoNumero) { ... }

Затем, чтобы использовать значение аргументов внутри функции, необходимо использовать то же имя, с которым были определены аргументы:

function suma_y_muestra(primerNumero, segundoNumero) { ... }
 var результат = первыйнумеро + вторыйнумеро;
 alert("результат " + "результат);
}

Внутри функции значение переменной primerNumeroбудет равно первому значению, переданному функции, а значение переменной segundoNumeroбудет равно второму значению, переданному ей. Чтобы передать значения функции, они включены в круглые скобки, используемые при вызове функции:

// Определение функции
function suma_y_показывает(первый, второй) { ... }
 var результат = первыйнумеро + вторыйнумеро;
 alert("результат " + "результат);
}

/ / Объявление переменных
var numero1 = 3;
var numero2 = 5;

/ / Вызов функции
сума_и_маш (число1, число2);

В приведенном выше коде следует отметить, что:

Хотя переменные почти всегда используются для передачи данных в функцию, вы могли бы непосредственно использовать значение этих переменных: suma_y_muestra(3, 5);
Количество аргументов, переданных функции, должно совпадать с количеством аргументов, указанных функцией. Однако JavaScript не показывает никаких ошибок, если передано больше или меньше аргументов, чем необходимо.
Порядок аргументов имеет решающее значение, поскольку первые данные, указанные в вызове, будут первым значением, которое ожидает функция; второе значение, указанное в вызове, является вторым значением, которое ожидает функция и так далее.
Вы можете использовать неограниченное количество аргументов, хотя, если их количество очень велико, это чрезмерно усложняет вызов функции.
Не обязательно совпадать с именем аргументов, используемых функцией, и именем переданных ей аргументов. В приведенном выше примере аргументы, которые передаются, являются numero1иnumero2, а аргументы, которые использует функция, являются primerNumeroи segundoNumero.

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

// Определение функции
function calculaPrecioTotal(цена) {
 var налоги = 1.16;
 var расходы = 10;
 var ценаtotal = (цена * налог) + расходыб;
}

/ / Вызов функции
расчет (23.34));

Приведенная выше функция принимает в качестве аргумента вызываемую переменную precioи добавляет к ней налоги и стоимость доставки, чтобы получить общую цену. При вызове функции основное значение цены передается напрямую по номеру 23.34.

Тем не менее, приведенный выше код не слишком полезен, так как в идеале функция может вернуть полученный результат, чтобы сохранить его в другой переменной и иметь возможность продолжать работать с этой общей ценой:

function калькулироватальнаяцена (цена) {
 var налоги = 1.16;
 var расходы = 10;
 var ценаtotal = (цена * налог) + расходыб;
}

// Значение, возвращаемое функцией, сохраняется в переменной
var отпускнаяцена = calculaPrecioTotal(23.34);

/ / Продолжить работу с переменной " цена"

К счастью, функции могут не только получать переменные и данные, но и возвращать значения, которые они вычислили. Для возврата значений внутри функции используется зарезервированное слово return. Хотя функции могут возвращать значения любого типа, они могут возвращать только одно значение каждый раз, когда они выполняются.

function калькулироватальнаяцена (цена) {
 var налоги = 1.16;
 var расходы = 10;
 var ценаtotal = (цена * налог) + расходыб;
 return precioTotal;
}

var цена = вычислительная цена (23.34);

/ / Продолжить работу с переменной " цена"

Чтобы функция возвращала значение, необходимо только ввести зарезервированное слово returnвместе с именем возвращаемой переменной. В приведенном выше примере выполнение функции достигает оператора return precioTotal;и в этот момент возвращает значение, содержащее переменную precioTotal.

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

var цена = вычислительная цена (23.34);

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

Если функция достигает оператора типаreturn, возвращается указанное значение, и выполнение функции завершается. Таким образом, все инструкции, включенные после одногоreturn, игнорируются, и по этой причине инструкция returnобычно является последней из большинства функций.

Чтобы сделать приведенный выше пример более полным, в функцию можно добавить еще один аргумент, указывающий процент налогов, который должен быть добавлен к цене продукта. Очевидно, что новый аргумент должен быть добавлен как к определению функции, так и к ее вызову:

function calculaвобщей цене (цена, процентналог) {
 var расходы = 10;
 var ценыналог = (1 + процентналог/100) * цена;
 var цена = цена налоги + расходы;
 return precioTotal;
}

var цена = вычислительная цена (23.34, 16);
var другийцениотал = расчетоталтал (15.20, 4);

Чтобы завершить предыдущее упражнение, общая цена, возвращаемая функцией, может быть сдана до двух десятичных знаков:

function calculaвобщей цене (цена, процентналог) {
 var расходы = 10;
 var ценыналог = (1 + процентналог/100) * цена;
 var цена = цена налоги + расходы;
 return precioTotal.toFixed(2);
}

var цена = вычислительная цена (23.34, 16);