Профессии
  • Веб-разработчик
  • Frontend разработчик
  • Backend разработчик
  • Full Stack разработчик
  • Интернет-маркетолог
  • Android-разработчик
  • UX/UI Дизайнер
Интенсивы
          • Основы вёрстки
          • Веб для начинающих
          • JavaScript
          • Vue.js
          • React.js
          • Node.js
          • PHP
          • Контекстная реклама
          • SMM
          • SEO для всех
          • Android: базовый
          • Android: продвинутый
          • UX/UI-дизайн: базовый
          • UX/UI-дизайн: PRO
          • Python: машинное обучение
        Видеокурсы
        • Как войти в IT
        • Ember.js
        • Верстка - быстрый старт
        • WordPress
        • Figma и Sketch
        • Все видеокурсы
          • Веб-разработчик
          • Frontend разработчик
          • Backend разработчик
          • Full Stack разработчик
          • Интернет-маркетолог
          • Android-разработчик
          • UX/UI Дизайнер
                • Основы вёрстки
                • Веб для начинающих
                • JavaScript
                • Vue.js
                • React.js
                • Node.js
                • PHP
                • Контекстная реклама
                • SMM
                • SEO для всех
                • Android: базовый
                • Android: продвинутый
                • UX/UI-дизайн: базовый
                • UX/UI-дизайн: PRO
                • Python: машинное обучение
                • Все записи блога
                • Истории выпускников LoftSchool
                • Полезные советы
                • Книги
                • Инструменты
                • Команда LoftSchool
                • Информация о курсах
                • Статьи
              • Видеокурсы
              • Главная
              • Блог
              • Статьи
              • Урок 4. Основы программирования. Функции

              Полезный блог

              Статьи
              Опубликовано 17.11.2020 13:07
              Урок 4. Основы программирования. Функции

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

              Сначала теория

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

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

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

              Объясняем

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

              1. Взять палочки.

              2. Поднять руку.

              3. Совершить удар по барабану.

              4. Нажать на педаль ногой.

              5. Помотать головой в такт.

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

              По сути, это алгоритм в алгоритме, который вызывается по имени с помощью команды. Например, лай собаки – это функция, которая выполняется по определённому алгоритму и вызывается командой «Голос».

              Аргументы

              Функциям можно передавать параметры, которые называются аргументами функции.

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

              Например, если взять функцию человека ходить, то в качестве аргументов в неё передаётся «обувь».

              Обувь – это параметр.

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

              Кроссовки и сапоги – это аргументы.

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

              При вызове функции в строке происходит следующее:

              1. Язык программирования находит её в той части программы, где она прописана.

              2. Выполняет команды, содержащиеся в ней, с учетом указанных при вызове аргументов.

              3. Возвращается обратно к строке, которая её вызвала.

              4. Переходит к следующей строке.

              Некоторые функции уже встроены в язык программирования, например, console.log() в JavaScript, с которой мы уже познакомились :)

              Пользовательские функции

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

              В JavaScript специальное слово для определения функций – function. После него указывается:

              — название;

              — список аргументов в круглых скобках;

              — тело функции в фигурных скобках.

              Создадим простейшую функцию без параметров с именем greeting, которая будет выводить строку 'Hello!':

              function greeting() {
               console.log('Hello!');
              }

              Справка! Перед вложенными в функцию строками принято ставить отступ с помощью клавиши <Tab>, чтобы они начинались немного дальше от края строки. Это визуально упрощает чтение кода.

              Если позже нам понадобится вызвать функцию в другой части программы, то мы вызовем её только по имени – «greeting();» – и нажмём <Enter>:

              greeting();

              Увидим в консоли результат:

              "Hello!"

              Функция выполнена.

              Тренировка

              1. Напишем на JS функцию height() с двумя аргументами: высота в полных метрах (m) и остаток в сантиметрах (cm). Объявление функции выглядит так:

              function height(m, cm) {
              }

              (m, cm) - это параметры, которые необходимо передавать в функцию, чтобы она заработала.

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

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

              100 * m + cm 

              Мы указали, что для расчета общей высоты в сантиметрах необходимо взять значение аргумента m, умножить его на 100, а затем прибавить значение аргумента cm.

              3. Запишем эту формулу в переменную total. Наша функция теперь выглядит так:

              function height(m, cm) {
              	let total = 100 * m + cm;
              }

              4. Попросим функцию сразу выводить значение переменной total, которое получилось после произведённого рассчета:

              function height(m, cm) {
              	let total = 100 * m + cm;
              	console.log(total);
              }

              5. Вызовем функцию с аргументами 1 и 70:

              height(1,70);

              Что произойдёт? Компьютер понимает, что функции height(m, cm) переданы аргументы 1 и 70 и подставляет их соответственно: m = 1, cm = 70. Затем производится расчёт по формуле:

              100*1+70

              Результат вычисления 170 записывается в переменную total. Далее – значение переменной total выводится в консоль:

              170

              6. Теперь попросим функцию выводить не просто результат расчёта, а добавлять к нему обозначение результата 'cm tall' и снова вызовем функцию с теми же аргументами:

              function height(m, cm) {
              	let total = 100 * m + cm;
              	console.log(total + 'cm tall');
              }
              height(1,70);

              Алгоритм работы функции не поменяется. Но при выводе результата вычисления – в нашем случае 170 – выполняется конкатенация (склейка) двух строк таким образом:

              — значение переменной total автоматически преобразуется в строку благодаря неявному преобразованию в JavaScript: число 170 превращается в строку '170';

              — строка 'cm tall' склеивается со строкой '170'.

              Теперь результат в консоли выглядит так:

              "170cm tall"

              Возвращение значений

              Функции могут возвращать значения – результаты вычислений. Эти значения удобно присвоить переменной и использовать при необходимости для выполнения дальнейших вычислений.

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

              Напишем функцию с именем calc(), которая бы принимала два числовых параметра и суммировала их. Запишем алгоритмическое выражение в переменную total:

              function calc(a,b) {
              	let total = a + b;
              }

              Справка! Переменной присваивается не само выражение a + b, а результат, который в итоге получится.

              Теперь попросим функцию возвращать значение переменной total:

              function calc(a,b) {
              	let total = a + b;
              	return total;
              }

              При вычислении функция получит результат, присвоит его переменной total и вернёт это значение как результат функции.

              Например, вызовем функцию calc() с параметрами 4 и 5:

              console.log(calc(4,5));

              Результат:

              9

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

              Домашнее задание

              Напишите функцию на языке JavaScript, которая бы считала количество минут в днях.

              Поделись публикацией

              Категории

              • Все записи блога
                • Трудоустройство
                  • Истории выпускников LoftSchool
                  • Полезные советы
                • Полезные ссылки
                  • Книги
                  • Инструменты
                • Новости школы
                  • Команда LoftSchool
                  • Информация о курсах
                • Статьи
                  • © 2012 - 2022 LOFT

                    Школа онлайн образования

                  • © 2012 - 2022 LOFT

                    Школа онлайн образования

                    • +7 (800) 600 09 54
                    • +7 (812) 339 22 01
                    • info@loftschool.com
                  • Полезная рассылка

                    Подпишись, чтобы быть в курсе наших новостей, акций и скидок.

                  • Полезное
                    • Карта курсов
                    • Работодателям
                    • Партнерская программа
                    • Вакансии
                    • Подарочные сертификаты
                    • Вебинары
                    • Блог
                    • FAQ
                  • Информация
                    • Публичная оферта портала
                    • Политика конфиденциальности
                    Безопасная передача данных