От автора: приветствую вас, друзья. В этой статье мы с вами начнем разбор такой важной темы, как пользовательские функции в JavaScript. Именно благодаря возможности создавать собственные функции, мы можем писать более гибкий и красивый код.
С функциями мы с вами уже на самом деле встречались. Вспомните методы alert, prompt и confirm — это и есть функции языка JavaScript. Они уже готовы к использованию и мы можем их вызывать в нашем коде. Кроме того, JavaScript предлагает нам сотни других функций, со многими из которых вы познакомитесь при дальнейшем изучении JavaScript.
Кроме того, JavaScript предоставляет нам возможность писать собственные функции. Для чего это нужно? Представим, что у нас есть некий блок кода, который мы можем использовать в нашей программе более одного раза. Если забыть о функциях, тогда нам, просто-напросто, придется дублировать код, т.е. скопировать его и использовать повторно в другом участке программы.
Согласитесь, это не удобно. Гораздо удобнее и приятнее было бы, если бы была возможность как-то запомнить код, который мы хотим использовать многократно, дать имя этому коду, а в дальнейшем вызывать и запускать этот код по его имени. В этом как раз и заключается функционал функций. Мы объявляем функцию, называем ее и описываем нужный блок кода внутри функции. Ну а в дальнейшем достаточно будет просто обратиться по имени функции, чтобы выполнился весь ее код.
Давайте посмотрим, как это происходит на практике. Пока что просто учебный пример — функция, которая будет выводить модальное окно с сообщением:
|
1 2 3 |
function hello(){ alert('Hello, world!'); } |
Итак, мы видим, что функции определяются с помощью ключевого слова function, после которого идет имя функции. Что касается имени функции, то здесь работают те же правила, что и для имен переменных, т.е. имя функции может включать в себя буквы, цифры, символы _ и $. Также рекомендуется имена функций делать глаголами, что логично, поскольку функция выполняет некие действия, что-то делает. Например, функцию, которая получает какое-то имя, можно назвать getName(), функцию, устанавливающую цену, можно назвать setPrice(). Думаю, идея понятна.
После имени функции идут круглые скобки, в которых можно перечислить параметры функции. Что такое параметры функции мы узнаем в следующей статье. Ну и, наконец, в фигурных скобках идет тело функции или, иными словами, исполняемый код функции.
Если сейчас обновить страницу, то ничего не произойдет, никакого модального окна мы не увидим, ведь функция пока лишь объявлена, но не вызвана. Для того, чтобы вызвать функцию, достаточно обратиться к ней по имени, при этом мы можем вызывать функцию сколь угодно много раз:
|
1 2 3 4 5 |
hello(); function hello(){ alert('Hello, world!'); } hello(); |
В результате выполнения данного кода мы увидим два последовательных вызова модального окна с приветствием. К слову, обратите внимание, мы вызвали функцию и до ее объявления, и после. Оба вызова корректно отработали. Это говорит о том, что данный вариант объявления функции мы можем использовать как до вызова функции, так и после. JavaScript перед выполнением проанализирует наш скрипт и создаст необходимые функции, чтобы их можно было без проблем вызывать в любом участке кода.
Пока что наш пример мало полезен, но уже здесь можно увидеть определенную пользу от применения функций. Представьте, что в нашем коде необходимо вывести в различных местах 10 одинаковых приветствий. Мы можем легко сделать это, вызвав 10 раз функцию alert, а можем поместить alert внутрь нашей функции и вызывать нашу функцию. А теперь представьте, что нам необходимо изменить текст приветствия. В первом случае мы вынуждены будем искать все 10 функций alert и в каждой менять текст. Во втором случае мы делаем это только один раз — внутри нашей функции — и произведенные изменения коснутся всех мест, где наша функция вызывается. Думаю, польза очевидна уже на данном этапе.
На этом мы завершим данную статью. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!
