JavaScript функции. Часть 3

JavaScript функции

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

Итак, в предыдущей статье мы написали функцию sum(), которая может принимать два параметра и выводить сумму в окне alert. А что если я не хочу выводить результат работы функции, а хочу дальше с ним работать? Например, сохранить в переменную. Сделать это поможет команда return (англ. возврат, ответ).

Давайте посмотрим, как же вернуть результат работы функции:

function sum(a, b){
    return a + b;
}
sum(1, 2);
sum(10, 5);

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

alert(sum(1, 2));
alert(sum(10, 5));

Результат работы нашей функции мы поместили внутрь функции alert и добились того же результата, что и в предыдущей статье. В чем же выгода? А выгода в том, что мы можем, к примеру, сохранить результат работы функции в переменную и работать далее с этим результатом. Например, попробуем вычесть один результат из другого:

function sum(a, b){
    return a + b;
}
var a = sum(1, 2),
    b = sum(10, 5);
alert(a - b);

Результат работы нашего кода: -12

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

function getSelect(start, end){
    var year = '<select>';
    while(start <= end){
        year += '<option>' + start + '</option>';
        start++;
    }
    year += '</select>';
    return year;
}

Функция запускает цикл и складывает в переменную year год, который доступен на текущей итерации цикла. Все это обязательно конкатенируется в переменную, чтобы мы не затирали предыдущий результат. Ну и в конце мы возвращаем значение переменной year. Осталось лишь вызвать функцию, передав ей пару параметров, и вывести результат ее работы на экран.

Выводить что-то мы пока можем только в модальном окне, поэтому давайте познакомимся с еще одним методом JavaScript — это метод document.write. Данный метод позволяет напечатать что-либо в документе.

<script>
	document.write(getSelect(1900, 2016));
	document.write(getSelect(2000, 2016));
</script>

В результате мы получили два выпадающих списка. Первый: от 1900 до 2016 года, второй: от 2000 до 2016 года.

Теперь мы можем использовать функцию многократно, передавая ей различные параметры, и один вызов функции фактически заменяет собой несколько строк кода, описанных в коде функции. На всякий случай прикреплю исходники моего кода. Обратите внимание, скрипт подключается здесь до вызова функции, в противном случае вызов функции работать не будет. Это достаточно грубое и не элегантное использование функций в JavaScript, но, вместе с тем, этот пример достаточно показателен.

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

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree