Стать программистом. Часть 18. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

В нашем прошлом уроке мы с Вами закончили рассматривать тему циклов в JavaScript'e. Точнее, мы закончили рассматривать тему основных циклов. В JavaScript'e существует еще несколько способов выполнять итерации, однако, для самого понимания, информации рассмотренной в двух предыдущих уроках должно быть достаточно, чтобы с легкостью понять логику работы цикла, с которым Вы можете быть не знакомы. Давайте подведем небольшой итог для прошлого урока. Мы рассмотрели с Вами два цикла: do{...} while (...) и for. Мы разобрали на практике работу этих циклах в симбиозе с итерированием, присваиванием со сложением, сравнением и условными операторами. Кроме этого мы познакомились с оператором break - для жесткого прерывания цикла, и оператором continue - для пропуска выбранной нами итерации и перехода к следующей.

Сегодня же мы с Вами подходим к такой, я бы сказал, фундаментальной теме в JavaScript, как Functions (Функции). Постараемся разобрать ее подробно, затронем немного теории и разберем несколько примеров на практике.

Давайте начинать!

Урок 18. Функции.

Что такое функция? Те кто из Вас еще не достаточно искушены в вопросе программирования возможно будут немного удивлены, но с самого первого урока нашего с Вами знакомства с JavaScript мы очень часто использовали функцию и выглядела она как alert(...);. Такой вот парадокс - используем функцию с первого урока, а к самому разъяснению функции как сущности, подошли только в восемнадцатом уроке. Но давайте будем поступательны.

В наших лучших традициях, я не стану приводить терминологическое описание функции, взятое из википедии или из какого-нибудь справочника программиста. Вместо этого мы с Вами сосредоточимся на доступности, понимании роли функции в JavaScript'e (да и в любом другом языке программирования).

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

Вот представьте себе человека. У него есть такая функция, которая называется "кушать". Этот процесс, по своей сути однотипен - мы открываем рот, суем туда что-то съедобное, пережёвываем это и наконец глотаем. При это мы можем есть где угодно и сколько угодно раз. И что самое важное мы всегда едим одинаково! То есть еда конечно будет разной, столовые приборы могут быть разными, место где мы едим может отличаться от предыдущего, но сам процесс: открыть рот -> засунуть туда еду -> прожевать -> глотнуть, сам этот процесс всегда остается неизменным, и каждый раз, когда мы хотим кушать, нам не надо придумывать как это делать - у нас уже есть четкий алгоритм и мы просто его выполняем.

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

Как объявляется (создается) функция в коде? В своем классическом виде структура функции выглядит следующим образом:

function /*имя функции*/ (/*аргументы функции*/) {
/* тело функции - код */
}

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

// FUNCTIONS (ФУНКЦИИ)

function message () {
    var text = 'привет, голос, я функция!';

    alert(text);
}

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

Создаем переменную text типа String со значением "привет, голос, я функция!"
Выводим значение этой переменной с помощью записи (как мы уже теперь знаем - с помощью другой функции) alert(text);

Вроде бы все должно быть понятно. Однако если мы сохраним наш код и откроем браузер с Index.html, то не увидим там никакого сообщения:

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

/* имя функции */ (/* аргументы функции */);

То есть мы должны написать имя функции и затем открыть, и закрыть круглые скобки. На самом деле именно круглые скобки () и есть команда для исполнения. Если мы просто напишем имя функции без них, то функция не исполнится. Давайте вызовем нашу функцию message:

// FUNCTIONS (ФУНКЦИИ)
function message () {
    var text = 'привет, голос, я функция!';

    alert(text);
}

// функция не исполнится так как нет круглых скобок
message;

// функция будет исполнена
message();

Обратите внимание на то, что к функции message мы обращаемся два раза. Первый раз на строке 10, второй раз - на строке 13. Однако, только на строке 13 мы используем круглые скобочки вызова. То есть наша функция должна отработать ровно столько раз сколько раз мы вызвали ее с круглыми скобками. В нашем случае это 1 раз.

В браузере мы видим вполне ожидаемы результат. Функция сработала 1 раз и вывела сообщение с нашей переменной text.

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

Давайте теперь разберемся что же такое аргументы функции. Помните наш пример с функцией человека "кушать"? Я там написал, что сам алгоритм:

открыть рот -> засунуть туда еду -> прожевать -> глотнуть

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

// FUNCTIONS (ФУНКЦИИ)
function message (text) {
    alert(text);
}

// функция один аргумент
message('привет, голос, я функция!');

// функция один аргумент
message('я та же самая функция, но с другим аргументом');

// функция без аргумента
message();

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

На строке 8 мы вызываем нашу функцию с аргументом - "привет, голос, я функция!".
На строке 11 мы вызываем нашу функцию с аргументом - "я та же самая функция, но с другим. аргументом".
3 А на строке 14 мы для эксперимента вызываем нашу функцию без аргумента.

В первых двух случаях вроде все ясно. А что же произойдет с вызовом без аргумента? Давайте проверим:

Как мы можем наблюдать, код отработал без ошибок. Первые два вызова с аргументами привели к вполне ожидаемым результатам - к выводу сообщений с разным текстом. А третье сообщение вернуло нам 'undefined'. Дело в том, что когда мы делаем вызов функции, которая ожидает получит какой-либо аргумент при своем вызове, но в конечном счете его НЕ получает, то JavaScript автоматически вместо такого отсутствующего аргумента подставляет специфическое значение undefined. Вот его то как раз мы и видим в последнем сообщении.

В целом и общем, именно так работают функции в JavaScript’e в своем классическом виде. В следующем уроке мы углубимся в тему функций и работу с ними и с аргументами.

А на сегодня все.

Ссылки на предыдущие уроки:

function reedMore () {
Урок 1, Урок 2, Урок 3, Урок 4, Урок 5, Урок 6, Урок 7, Урок 8, Урок 9, Урок 10, Урок 11, Урок 12, Урок 13, Урок 14, Урок 15, Урок 16, Урок 17 }
reedMore ();