javascript-функций · Темы GitHub · GitHub
Здесь 61 публичный репозиторий соответствует этой теме…
ганккверти / 123-Essential-JavaScript-Interview-Questions
Звезда 4,2кдг92 / Анализ производительности-JS
Звезда 597кубический / губы
Спонсор Звезда 278туантвк / javascript-интервью-вопросы-разработчик
Звезда 75доско / санфран
Спонсор Звезда 57омариосуто / анимусы
мои старые проекты / util.
js Звезда
25агабардо / nyc_restaurants
Звезда 10туз411 / бинго-функционал-js
Звезда 7Пуртиик / JavaScript-ES6-TheWeirdParts
Звезда 7JSFromHell / JSFromHell
Звезда 5Джон-Аззаро / JavaScript_Рецепты
Звезда 5современный javascript / функциональное программирование-javascript
Звезда 4jweinst1 / Роялскрипт
Звезда 4Фатима-хаб333 / RPG-игра
Звезда 2ABER1047 / Для меня
Спонсор Звезда 2SmashingQuasar / украшенный выбор
Звезда 2openshift-облачные функции / js-функция-оператор
Звезда 1Deanw123прогноз / Javascript-Основы
Звезда 1 Канха412
/
kanha412.
github.io Звезда
1Улучшить эту страницу
Добавьте описание, изображение и ссылки на javascript-функции страницу темы, чтобы разработчикам было легче узнать о ней.
Курировать эту тему
Добавьте эту тему в свой репозиторий
Чтобы связать ваш репозиторий с javascript-функции тему, перейдите на целевую страницу репозитория и выберите «управление темами».
Учить больше
Использование функций для решения сложных задач JavaScript — JavaScript 101
JavaScript 101 — это серия обучающих видеороликов, предоставленных инструкторами DevMountain по веб-разработке. Нажмите здесь, чтобы посмотреть всю серию видео.
Вы можете либо написать свои собственные функции, либо использовать предварительно написанный набор функций в библиотеке кода вашего языка программирования для выполнения специализированных задач. Создание этих функций — это одно, но вам нужно усвоить идею о том, что вы можете объединить несколько шагов программирования в одно действие, если правильно запрограммируете свои функции. В этом видео вы узнаете, как использовать функции для решения сложных задач JavaScript.
Транскрипция видео
JavaScript предоставляет функции, аналогичные большинству языков сценариев и программирования. Функции — один из фундаментальных строительных блоков в JavaScript. В частности, в JavaScript функция позволяет вам определить блок кода, дать ему имя, а затем выполнить его столько раз, сколько вы хотите.
Функции — это «подпрограммы», которые могут быть вызваны кодом, внешним (или внутренним в случае рекурсии) по отношению к функции. Они являются объектами первого класса, потому что у них есть свойства и методы, как и у любого другого объекта. Что отличает их от других объектов, так это возможность вызывать функции.
Когда вы создаете функцию, она может содержать любое количество кода и любой тип кода. Вы можете создавать переменные, изменять переменные, выполнять логические сравнения с условными операторами и выполнять любое количество других задач, содержащихся в одной функции. Создание функций — это одно, но совершенно другой навык, который нам нужно освоить, — это идея, что мы можем объединить несколько шагов программирования в одно действие, если правильно запрограммируем наши функции.
Например, может показаться простым создать функцию, которая складывает числа вместе, потому что это всего лишь одно действие. Но функции могут быть намного более мощными, если вы думаете о них как о чем-то, что содержит любое повторяемое количество шагов.
Вспомните нашу дискуссию о вычислительном мышлении. Частью программирования является создание алгоритмов, использующих повторяющиеся шаги. Так что не ограничивайте то, что, по вашему мнению, могут делать функции, думая, что они могут делать только одну вещь. Функция может выполнять одну строку кода, например сложение двух чисел, или сотни строк кода, например поиск тысяч записей в базе данных и поиск одного элемента. Что угодно, независимо от того, как долго, может содержаться внутри функции.
Гибкость функций
Кроме того, гибкость, которую функции обеспечивают нашему коду, означает, что нам необходимо отслеживать, куда передаются данные. Например, если бы мне нужно было создать функцию для подсчета определенной переменной, то моей функции вообще не нужно было бы передавать какие-либо данные. Моя функция просто подсчитывала бы эту переменную. Но если бы я хотел создать более гибкую функцию, которая прибавляла бы единицу к любому числу или к любой переменной, то мне понадобился бы способ указать этой функции, с какой переменной манипулировать.
Таким образом, я могу выбрать, какую переменную нужно изменить, выбрав то, что передается в функцию.
Что такое параметры?
Функции используют механизм ввода, чтобы определить, какие данные будут переданы этой функции. Они называются параметрами. Мы обсуждали их раньше, но они являются секретным оружием для функций, которые делают разницу между жесткими функциями и более мощными и гибкими действиями, которые может выполнять ваш код.
Использование параметров для создания гибкой функции
Давайте вернемся к приложению для обмена сообщениями, чтобы показать, что я имею в виду под использованием параметров для создания гибкой функции. Предположим, что каждый раз, когда кто-то нажимает кнопку «Отправить», вы хотите выполнить функцию, которая будет отображать слова, которые они напечатали, на экране. Мы не можем сделать это без передачи данных в функцию. Это потому, что мы не хотим, чтобы функция отправляла установленный ответ. Мы хотим, чтобы он отправлял все, что вводит пользователь.
И поэтому нам нужно каким-то образом передать эти данные в функцию. Мы делаем это с помощью параметров. Обратные вызовы — это шаблон. Это не синтаксис. Когда мы отправляем параметры в функцию, мы можем отправить другую функцию вместо числа, строки или другого простого типа данных. Это позволяет принимающей функции вызывать функцию, которую мы передали, всякий раз, когда это необходимо.
Мы делаем это в реальной жизни всякий раз, когда даем кому-то номер телефона. Допустим, я использую Стива, чтобы помочь мне выполнить задачу А, а Дейва — выполнить задачу Б. Стив и Дейв — это функции, которые я вызываю, звоня им на их телефоны. Что, если я дам номер Дэйва Стиву? Когда Стив позвонит Дэйву? Я не знаю. И это не имеет значения. Теперь Стив решает, когда позвать Дейва на помощь.
Обычное применение этого в нашем коде — обработка событий кликов. Мы не знаем, когда пользователь нажмет кнопку. Поэтому мы даем движку JavaScript функцию, которую он может использовать, чтобы помочь при нажатии кнопки.
Мы не запускаем функцию. Мы создаем инструкции и передаем их дальше. Мы рассмотрим это подробнее в наших видеороликах о синтаксисе.
Многострочные функции
Давайте поговорим о многострочных функциях или функциях, которые выполняют за нас несколько действий. Функции — один из строительных блоков JavaScript. И они могут быть такими мощными. Они могут сделать так много разных вещей для нас. Итак, я собираюсь представить многострочные функции или функции, выполняющие несколько задач.
Многострочные функции. Практика I
Давайте взглянем на редактор кода. В редакторе кода я создам функцию создания предложений. И в фигурных скобках для составителя предложений первое, что я собираюсь сделать, это создать переменную. Я назову это первой частью. Это будет первая часть предложения. Я использую пусть. Пусть это вариант var. По сути, он делает то же самое. Есть небольшие вариации. Но мы можем использовать let почти так же, как мы использовали бы var. Так пусть, первая часть.
В значении, которое я сохраняю в переменной, первая часть будет I am начальная запятая и небольшой пробел. И затем я собираюсь начать делать некоторые другие вещи в этой функции. Я скажу этой функции, второе, что вы должны сделать, это создать еще одну переменную с именем second part. И значение, которое я буду там хранить, будет и я конец предложения, восклицательный знак. И последнее, что я хочу, чтобы эта функция делала, это возвращала первую часть. Я воспользуюсь плюсом. Плюс — это оператор, объединяющий эти два предложения вместе. Таким образом, первая часть плюс вторая часть вернут одну единственную строку, которая должна быть «я — начало запятой, а я — конец предложения».
Давайте посмотрим, что у нас есть. Я собираюсь пойти дальше и запустить Quokka на этом валу. Quokka — это расширение кода VS, которое поможет мне взглянуть на некоторые значения переменных в моем файле. Просто очень полезно посмотреть, что происходит в файле. Итак, я собираюсь создать переменную с именем result или, точнее, с полным предложением.
И то, что я собираюсь хранить там, является результатом вызова генератора предложений. Скобки предложения. Хорошо. Я наберу имя переменной для предложения, а Quokka скажет мне, какое значение хранится в полном предложении. Я начало и конец предложения. Поэтому я использовал здесь многострочную функцию, чтобы иметь возможность создать функцию, которая выполняет несколько задач, а затем возвращает нам окончательное значение.
Многострочные функции. Практика II
Давайте рассмотрим другой пример. Функция. Давайте назовем этого создателя мечты, потому что он создаст для нас мечту или желание. Давайте посмотрим здесь. Эта функция будет первой… Давайте начнем с числа. Итак, пусть числ. И я скажу 50. И затем я переопределю значение num, сначала указав имя переменной. номер И я собираюсь использовать знак равенства в качестве оператора, чтобы переопределить его значение и сказать, что новым значением для num будет num, которое в настоящее время 50 раз два. Таким образом, новое значение для num должно быть 100.
И последнее, что я собираюсь сделать, это вернуть строку. Я хочу жить до тех пор, пока я не умру, и тогда я собираюсь конкатировать на это число. И я просто поставлю число. Так что это должно дать нам значение. Я хочу дожить до 100 лет. Посмотрим, доживет ли. Я скажу, пусть результат равен вызову создателя снов. И давайте Quokka скажет нам, что сейчас хранится в результате. Я хочу дожить до 100 лет.
Итак, это был краткий обзор многострочных функций. Функции могут сделать для нас очень многое. Так что осознайте это. Поймите, что вы можете указать функциям выполнять несколько задач. Он может делать одну единственную вещь или может делать 50 отдельных вещей. Это зависит от вас и вашего воображения и того, что вам нужно, чтобы ваша функция делала для вашей программы.
Динамические функции в JavaScript
Давайте поговорим о создании динамических функций в JavaScript. Вы будете создавать множество различных функций. И создаваемые вами функции, вероятно, будут предназначены для выполнения очень специфической задачи.
Но мы хотим иметь возможность создавать динамические функции. Функции, которые можно вызывать и которые могут выполнять определенную задачу, но на основе определенной информации, которая передается в функцию. Функции могут иметь входы и выходы. Мы обсудили выходные данные или то, что функция может вывести с операторами return. И давайте немного поговорим о том, как сделать наши функции более динамичными, обсудив, какие входные данные мы можем дать функции.
Динамические функции. Практика I
Давайте взглянем на редактор кода. И давайте создадим функцию. Я назову эту функцию приветствием. Теперь эта функция делает одну вещь. Он собирается вернуть строку. Он поздоровается с Джо. И что я собираюсь сделать, так это зафиксировать результаты. Я собираюсь сказать, пусть результат. И я вызову приветствие.
Хорошо. Итак, как я уже сказал, у функций есть входы и выходы. Поэтому, когда я вызываю приветствие, результатом этой функции является строка hello Joe. Он возвращает это значение.
Это его выход. И этот вывод сохраняется в результате. Я покажу вам это, запустив Quokka. Quokka — это просто плагин кода VS, который помогает нам понять некоторые значения наших переменных в этом файле. Поэтому, если я наберу здесь имя переменной, она скажет мне, что хранится внутри этой переменной. Привет Джо. Хорошо. Итак, у нас есть эта строка hello Joe, которая сохраняется в результате. Неважно, сколько раз в вызове приветствия. Давай сделаем это снова. Пусть получится два одинаковых приветствия. Призван снова. И давайте посмотрим на значение второго результата. Независимо от того, сколько раз я вызываю это, я буду каждый раз приветствовать Джо.
Эта функция не очень динамична. Итак, чтобы сделать эту функцию более динамичной, мы должны иметь возможность вводить какие-то входные данные в эту функцию. И я покажу вам, как это сделать. Поэтому я собираюсь избавиться от этого второго вызова и получить результат два. Хорошо. Если бы я хотел передать часть информации в эту функцию, что мы можем сделать.
Мы можем внести свой вклад. Я собираюсь сделать это здесь. Когда я вызываю приветствие, я помещаю здесь между этими скобками часть информации. И я передам приветствие конкретное имя. Я просто на самом деле собираюсь передать его от своего имени. Теперь я передаю строку, Джо. И вот эта строка, все, что я заключаю между этими скобками, называется аргументом. Хорошо? Это аргумент функции.
И для того, чтобы зафиксировать это значение, которое передается в функцию, мне нужен параметр. Параметры помещаются между скобками в определении функции. Так как я передаю имя, я назову этот параметр именем. Я могу назвать параметр как угодно. Неважно, что это такое, но вы должны назвать его как-нибудь соответствующим типу данных, которые передаются в функцию. Итак, я передаю строку Джо. И я улавливаю это значение. Или это значение сохраняется в этом имени параметра. Теперь с параметрами можно работать так же, как с локальными переменными в функции. Так что вместо жесткого кодирования Джо здесь.
На самом деле я собираюсь добавить имя в конец этой строки. Теперь, если вы посмотрите на то, что Quokka показывает нам здесь. Внутри этой переменной результата мы все еще получаем привет, Джо. Это точно такой же результат. Только на этот раз Джо не было внутри функции. Это не было частью этой строки с самого начала. Мы передали эту информацию в качестве входных данных для этой функции.
Итак, мы сделали эту функцию более динамичной, используя этот аргумент, строку Joe, и передав ее в эту функцию в качестве входных данных. И мы фиксируем это значение с помощью параметра. Параметры помещаются между круглыми скобками и определением функции. И тогда мы можем использовать этот параметр так же, как и любую другую переменную внутри этой функции. Итак, теперь мы возвращаем строку hello и объединяем эту переменную со строкой здесь.
Вы можете видеть это… Однако значение результата. Quokka говорит нам, что значение результата по-прежнему «привет, Джо». Несмотря на то, что мы больше не жестко кодируем строку привет, запятая, Джо.
Итак, теперь мы на самом деле принимаем входные данные. Но самое классное в том, что мы изменили, несмотря на то, что прямо сейчас мы получаем точно такой же результат, это то, что мы сделали эту функцию динамической, используя аргументы и параметры или используя входные данные.
Если бы я… я бы сказал, пусть результат два. Я снова вызову приветствие. Только на этот раз я пропущу строку Ника. Давайте посмотрим на значение второго результата. На этот раз второй результат дает нам значение Hello Nick. И снова, еще раз, если я хочу сделать это снова, пусть получится три одинаковых приветствия и пройдет Грег. А теперь значение результата три — привет, Грег. Хорошо? Итак, мы принимаем ввод, и функция возвращает другую строку на основе этого ввода. На основе аргумента, который мы передали в него.
Динамические функции. Практика II
Позвольте мне показать вам еще один пример, где мы собираемся немного посчитать. Итак, я собираюсь создать функцию с именем умножить. И эта функция на самом деле будет принимать две части информации.
Поэтому я поставлю здесь два параметра. Цифра один запятая цифра два. Итак, вы собираетесь отделить каждый параметр запятой. А потом фигурные скобки. И что я хочу, так это то, что я хочу эту функцию… Она будет состоять из двух чисел. Входными данными будут значения num one и num two. А затем он вернет или выдаст число один, умноженное на два. Хорошо. Теперь, когда я вызываю эту функцию… Скажите let result, и я вызову умножение. И что я собираюсь здесь сделать, так это передать два аргумента. У меня есть два параметра. Здесь я могу передать две части информации. Так что я пропущу три запятых и пять. Как и параметры, аргументы будут разделены запятой.
Посмотрим, к чему это приведет. Квокка скажет нам, что результат равен 15. Итак, я сдал три балла. Этот первый аргумент передается в этот первый параметр, номер один. И второй аргумент второго параметра. И вы можете иметь здесь столько аргументов и параметров, сколько захотите. Если бы я хотел иметь третий, четвертый и пятый параметр… Или извините.
Третий, четвертый и пятый аргумент, мне нужно было бы иметь третий, четвертый и пятый параметр, чтобы иметь возможность перехватывать это входящее значение. Хорошо? Но в данном случае у нас всего два аргумента. Итак, нам нужны два параметра. Я принимаю эти два входа три и пять. Захват их в номер один номер два. А затем умножить их вместе и вернуть этот вывод. И результат 15.
Итак, это введение в ввод и вывод с использованием аргументов и параметров, а затем возврат значений вне функции для создания более динамичных функций в JavaScript.
Бывают случаи, когда вы хотите, чтобы какая-то функция вызывалась или выполнялась какая-то задача, когда происходит какое-то событие. Например, когда какой-то пользователь нажимает кнопку в вашем приложении, вы можете захотеть запустить какую-то функцию. Я покажу вам, как это сделать. Давайте посмотрим на этот HTML-файл.
Итак, сейчас между открывающим и закрывающим тегами body ничего нет. Я собираюсь изменить это. Я собираюсь добавить элемент кнопки.
А между тегами кнопки я поставлю «отправить». Здесь, в окне браузера, вы можете увидеть нашу кнопку отправки. Прямо сейчас я могу щелкнуть по нему, и он ничего не сделает, но давайте изменим это. Чтобы изменить это, нам понадобится немного JavaScript. Я собираюсь добавить теги скрипта ближе к концу… Или прямо перед закрывающим тегом body. Если я хочу ввести допустимый JavaScript, я могу ввести любой допустимый JavaScript между тегами script здесь. Хорошо?
Итак, первое, что я хочу сделать, чтобы запустить какую-то функцию, когда есть щелчок по этому элементу, это то, что мне нужно использовать JavaScript, чтобы фактически выбрать этот элемент. Я собираюсь сделать это следующим образом. Пусть кнопке отправки будет присвоено значение document.getElementById. И тогда я собираюсь призвать его. Хорошо. Так что это читается немного так же, как английский. Документ.getElementById. Я пытаюсь выбрать какой-то элемент по его ID. Поэтому для этого мне действительно нужно иметь уникальный идентификатор элемента, который я хочу выбрать на кнопке отправки.
Итак, я подойду к кнопке и добавлю атрибут ID. И это будет уникальный идентификатор. И значением этого идентификатора будет тире BTN. Хорошо. Теперь вернемся к нашему JavaScript. Документ.getElementById. Если я хочу получить какой-то элемент по идентификатору или выбрать какой-то элемент по идентификатору, мне действительно нужно передать идентификатор в качестве аргумента. Поэтому я говорю, чтобы он получил элемент с идентификатором submit dash BTN.
Хорошо. Теперь у меня есть эта переменная здесь. Кнопка «Отправить». И у меня это есть, потому что результатом Document.getElementById будет ссылка на выбранный элемент. Наша кнопка отправки. Итак, теперь, когда я выбрал нашу кнопку отправки, я буду ссылаться на переменную здесь, в строке 14. Кнопка отправки. И я собираюсь сделать точечное добавление прослушивателя событий. И я собираюсь призвать его. Хорошо. В JavaScript, когда мы используем добавление прослушивателя событий, есть много разных событий, которые мы можем прослушивать.
В частности, мы собираемся узнать об использовании… Мы прослушиваем событие щелчка.
Второй аргумент сразу после щелчка по строке будет функцией. Теперь у нас есть кнопка отправки, когда происходит щелчок, эта функция вызывается. И я собираюсь добавить предупреждение здесь. Оповещение — это встроенная функция в JavaScript. Появится небольшое окно предупреждения с любым сообщением, которое мы поместили между скобками. Так что я просто поставлю «Отправлено». Хорошо. Я могу поместить в эту функцию практически все, что захочу. Функции могут быть очень динамичными. Но я просто выбираю только одну представленную строку. Просто чтобы мы могли проверить, работает ли это. Я подойду к окну браузера и нажму кнопку отправки. И наше окно предупреждения всплывает и говорит, что отправлено. Идеально. Это работает.
Давайте продолжим и подведем итоги в последний раз. Итак, что мы имеем. Первое, что мы сделали, это использовали метод Document.getElementById, чтобы иметь возможность выбрать элемент по его идентификатору.
Итак, вот эта строка должна совпадать с каким-то идентификатором. И он соответствует нашему идентификатору на нашем элементе кнопки прямо здесь. В переменной кнопки отправки мы сохранили ссылку на нашу кнопку отправки. И мы ссылаемся на эту переменную и вызываем добавление прослушивателя событий. Мы специально прослушиваем, когда происходит событие щелчка на этом элементе кнопки. И когда происходит это событие щелчка, вызывается следующая функция.
Динамические функции. Практика III
Давайте продолжим и рассмотрим еще один пример. Я добавлю еще одну кнопку. И я знаю, что я собираюсь… я назову это своей кнопкой отмены. Но я знаю, что буду выбирать эту кнопку с помощью JavaScript. Поэтому я собираюсь добавить уникальный идентификатор. И значением этого идентификатора будет отмена тире BTN. Теперь в нашем другом JavaScript я буду следовать точно такому же шаблону. Первое, что мне нужно сделать, это иметь возможность выбрать этот элемент, чтобы я мог прослушивать щелчок по нему.
Итак, пусть кнопке отмены будет присвоено значение Document.getElementById. Я вызываю этот метод. Затем я помещаю идентификатор элемента, который хочу выбрать, между скобками. Отменить тире BTN. Теперь, когда я правильно выбрал элемент, я могу прослушивать событие клика. Кнопка «Отмена» в качестве ссылки на переменную в строке чуть выше точки добавляет прослушиватель событий. И я призываю его. И первый аргумент, который мы передаем, это кавычки click. Мы прослушиваем всякий раз, когда происходит щелчок по нашей кнопке отмены. Функция запятой в качестве второго аргумента. Таким образом, эта функция будет вызываться всякий раз, когда будет нажата кнопка отмены. И я собираюсь сделать что-то подобное. Оповещение об отмене.
Хорошо. Итак, у нас есть две кнопки. И наши две кнопки, всякий раз, когда на них нажимают, они должны вызываться… Должны вызываться две отдельные функции. Тот, который отправляет оповещения, и тот, который отменяет оповещения. Давайте продолжим и проверим, что это происходит.