Методы и функции JavaScript


Содержание

Функции JavaScript

JavaScript function позволяют организовать скрипты и упрощают повторное использование кода. Вместо того чтобы создавать длинные фрагменты кода, разбросанные по всей HTML-странице , скрипты организуются в логические группы.

Объявление и вызов функции JavaScript

Синтаксис функции JavaScript выглядит следующим образом:

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

В следующем примере показана функция, определяемая в разделе HTML-страницы и вызываемая в разделе :

Передача аргументов в функцию

В приведенном выше примере ( script type text JavaScript function ) функции не передается никакие аргументы. Обычно функция предназначена для выполнения каких-либо действий с несколькими аргументами:

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

Возврат значения из функции

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

В приведенном выше примере мы передаем в функцию addValues значения 10 и 20 . Функция addValues складывает эти два значения и возвращает результат. Оператор return присваивает результат переменной result, которая затем используется для создания строки, выводимой на HTML-странице .

Вызов JavaScript function может быть выполнен в разных местах. Например, не обязательно присваивать результат в качестве значения переменной. Можно использовать его непосредственно в качестве аргумента при вызове document.write .

Важно отметить, что функция может возвращать только одно значение:

Где размещать объявления функций

Есть два места, в которых рекомендуется размещать объявления JavaScript function return: внутри раздела HTML-документа или во внешнем файле .js . Наиболее предпочтительным местом считается второй вариант, так как он обеспечивает наибольшую гибкость.

Цель создания функций — сделать их как можно более общими для того, чтобы максимизировать возможность повторного использования.

Данная публикация представляет собой перевод статьи « Understanding JavaScript Functions » , подготовленной дружной командой проекта Интернет-технологии.ру

Функциональное программирование

Функции

Функции представляют собой набор инструкций, выполняющих определенное действие или вычисляющих определенное значение.

Синтаксис определения функции:

Определение функции начинается с ключевого слова function , после которого следует имя функции. Наименование функции подчиняется тем же правилам, что и наименование переменной: оно может содержать только цифры, буквы, символы подчеркивания и доллара ($) и должно начинаться с буквы, символа подчеркивания или доллара.

После имени функции в скобках идет перечисление параметров. Даже если параметров у функции нет, то просто идут пустые скобки. Затем в фигурных скобках идет тело функции, содержащее набор инструкций.

Определим простейшую функцию:

Данная функция называется display() . Она не принимает никаких параметров и все, что она делает, это пишет на веб-страницу строку.

Однако простого определения функции еще недостаточно, чтобы она заработала. На надо еще ее вызвать:

Необязательно давать функциям определенное имя. Можно использовать анонимные функции:

Фактически мы определяем переменную display и присваиваем ей ссылку на функцию. А затем по имени переменной функция вызывается.

Также мы можем динамически присваивать функции для переменной:

Параметры функции

Рассмотрим передачу параметров:

Функция display принимает один параметр — x. Поэтому при вызове функции мы можем передать для него значение, например, число 5, как в данном случае.

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

Во втором случае в функцию передается числа из массива nums. Но чтобы передавался не просто массив, как одно значение, а именно числа из этого массива, применяется spread-оператор (многоточие . ).

Необязательные параметры

Функция может принимать множество параметров, но при этом часть или все параметры могут быть необязательными. Если для параметров не передается значение, то по умолчанию они имеют значение «undefined».

Здесь функция display принимает два параметра. При вызове функции мы можем проверить их значения. При этом, вызывая функцию, необязательно передавать для этих параметров значения. Для проверки наличия значения параметров используется сравнение со значением undefined .

Есть и другой способ определения значения для параметров по умолчанию:

Если параметрам x и y не передаются значения, то они получаются в качестве значений числа 5 и 10 соответствено. Такой способ более лаконичен и интуитивен, чем сравнение с undefined.

При этом значение параметра по умолчанию может быть производным, представлять выражение:

В данном случае значение параметра y зависит от значения x.

При необходимости мы можем получить все переданные параметры через глобально доступный массив arguments :

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

Неопределенное количество параметров

С помощью spread-оператора мы можем указать, что с помощью параметра можно передать переменное количество значений:

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

Результат функции

Функция может возвращать результат. Для этого используется оператор return :

После оператора return идет значение, которое надо возвратить из метода. В данном случае это квадрат числа х.

После получения результата функции мы можем присвоить его какой-либо другой переменной:

Функции в качестве параметров

Функции могут выступать в качестве параметров других функций:

Функция operation принимает три параметра: x, y и func. func — представляет функцию, причем на момент определения operation не важно, что это будет за функция. Единственное, что известно, что функция func может принимать два параметра и возвращать значение, которое затем отображается в консоли браузера. Поэтому мы можем определить различные функции (например, функции sum и subtract в данном случае) и передавать их в вызов функции operation.

Возвращение функции из функции

Одна функция может возвращать другую функцию:

В данном случае функция menu в зависимости от переданного в нее значения возвращает одну из трех функций или undefined.

Продвинутая работа с функциями JavaScript

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Разное

Работа с канвасом

Практика

  • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
    Работа с
    AJAX в JavaScript
    Работа с
    AJAX + PHP

Контекст

Drag-and-Drop

  • Урок №
    Введение
    в ООП в стиле ES6
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
    Продвинутая работа
    с классами на JavaScript
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

В данном уроке мы разберем анонимные функции и замыкания на языке JavaScript.

Режим use strict

В JavaScript существует специальный режим, по которому код будет выполнятся по современному стандарту ES5, а не по более старому (это по умолчанию).

Этот режим включается директивой «use strict»; или ‘use strict’; и ставится в начале скрипта:

Строгий режим можно активировать только для кода функции:

Исходный код функции и результат

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

Функция как переменная

В JavaScript функции — это такие же переменные. К примеру, если у нас есть какая-то функция — мы можем записать ее в другую переменную — и эта функция станет доступна с другим именем:

Можно также создать безымянную функцию и записать ее в какую-то переменную:

Так как функция — это переменная, то невозможно существование переменной и функции с одинаковым именем. В следующем примере функция func будет затерта и вместо нее станет строка ‘hello’:

Функциональные выражения и объявление функций

Функцию можно объявить двумя способами: первый способ вы изучали в предыдущих уроках, а второй способ — это сделать безымянную функцию и записать ее в какую-либо переменную:

Первый способ называется Function Declaration (объявление функции), а второй — Function Expression (функциональное выражение):

По сути это одно и то же, но есть существенная разница: функции, объявленные как Function Declaration, создаются до выполнения кода. Поэтому их можно вызвать до объявления, например:

А функциональные выражения создаются в момент выполнения кода и недоступны выше. Поэтому такой код выдаст ошибку:

Функциональные выражения

Функциональные выражения достаточно удобная штука — можно, например, записать в переменную одну из функций, в зависимости от условия:

Особенности Function Declaration при use strict

Function Declaration при use strict видны только внутри блока, в котором объявлены. В данном случае функция func объявлена внутри ифа, но не будет видна снаружи:

Без use strict все будет нормально.

Передача функции по ссылке

Функции в JavaScript — это объекты. А объекты в JavaScript копируются по ссылке — это значит, что если у нас есть две переменные с одной и той же функцией — в них не лежит копия этой функции, а обе эти переменные ссылаются на одну и ту же функцию:

Анонимные функции

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

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

Тоже самое при addEventListener:

Впрочем, если имя функции вам нужно, например, для того, чтобы открепить ее через removeEventListener — можно дать и имя:

Это имя будет доступно только внутри самой функции — и нигде извне.

Функция как параметр другой функции

Пусть у нас даны 2 функции:

Илон Маск рекомендует:  Примеры верстки слоями

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

Наша функция go запишет первую функцию в переменную func1, а вторую — в func2, затем просуммирует числа, возвращаемые этими функциями и выведет их на экран:

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

Рассмотрим еще пример: сейчас в функцию и go будем передавать параметром разные функции — и будем видеть разный результат:

А можем вообще использовать анонимную функцию, создаваемую в момент передачи параметра:

Функция в функции

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

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

Функция, возвращающая функцию

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

В этом случае, если мы посмотрим результат работы внешней функции — мы увидим исходный код внутренней функции:

Чтобы увидеть результат работы внутренней функции — нужно вызвать внешнюю функции с двумя круглыми скобками:

Могут быть и такие вызовы функций: func()()() и func()()()() — и так далее до бесконечности. Для этого нужно, чтобы внутренняя функция тоже возвращала функцию, та — еще одну и так далее.

Область видимости переменных

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

То же самое будет, если у нас функция содержит внутри другую функцию — переменные внешней функции видны во внутренней:

Замыкания

Пусть у нас есть переменная num, определенная снаружи функции:

Если вызвать нашу функцию — то она сначала увеличит переменную num на единицу, а затем вернет новое значение num:

Если вызвать нашу функцию несколько раз — каждый раз она будет выводить на единицу больше, так как каждый вызов func приводит к увеличению внешней переменной num:

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

Обернем всю нашу конструкцию в функцию (назовем ее createCounter), а функцию func, которая у нас была ранее, сделаем анонимной и сделаем так, чтобы новая функция createCounter возвращала эту анонимную функцию:

Рассмотрим подробнее, что тут происходит: переменная num является локальной внутри функции createCounter, но при этом она доступна в анонимной функции (это мы видели в предыдущих примерах). В строчке var counter = createCounter() анонимная функция запишется в переменную counter. Получится, что у нас далее есть функция counter, внутри которой доступна переменная num из createCounter.

Давайте убедимся в этом:

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

Еще раз: преимуществом такого подхода является то, что переменная num не видна снаружи createCounter и ее никто не сможет случайно затереть. Снаружи она не видна, но доступ к ней есть — через функцию counter, но только через нее.

Такая штука называется замыкание. Замыкание — это функция со всеми доступными внешними переменными (типа num в нашем случае). Эти переменные называются лексическим окружением функции.

Давайте вернемся назад к счетчику — осталось самое интересное: если createCounter вызвать несколько раз, записав результат в разные переменные — каждая из них станет независимым счетчиком.

В следующем примере у нас есть 2 функции: counter1 и counter2 — и они работают совершенно не мешая друг другу (получается, что у каждой из них своя переменная num):

Вызов функции на месте

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

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

Для вызова функции на месте хотелось бы сделать что-то в таком роде:

Однако, это не будет работать, так как на месте разрешен вызов только функциональных выражений. Поэтому необходимо сделать из нашей функции выражение, например, поставив перед ней плюс, такое уже будет работать:

Так тоже будет работать:

Но более принято брать такие функции в круглые скобки, вот так:

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

Иногда во избежания ошибок в начале ставится точка с запятой (ошибки могут возникнуть при сжатии файла минимизатором):

В чем отличия метода от функции?

Хотелось бы узнать о различиях между методом ( > ) и функцией ( > ) — как по смыслу, так и технически. Желательно не выдержку из спеки (в конце можно и её), а более человеческим языком.

Как частный вопрос: почему метод не получается использовать в роли конструктора?

2 ответа 2

Разница между «методом» и «функцией» в JS исключительно в синтаксисе. Аналогично с «классом» и «прототипом».

Просто к ES6 разрабы языка решили окончательно признать, что прототипы никому даром не нужны ни под каким соусом (расширения стандартных классов сообщество объявило вселенским злом, а выкрутасы с прототипами мимо классического ООПа напрочь убивают хитроумные оптимизации во всех жабоскриптовых движках), поэтому следующее поколение жабоскриптеров может писать «классы», «методы», «конструкторы», а про прототипы вспоминать на лекциях «продвинутый жабоскрипт, или, мама, я еду без рук!»

Вопсче, традиционно считается, что функция — это нечто, что существует отдельно от всего, принимает параметры и возвращает результат; метод — это нечто, что прибито гвоздями к конкретному объекту, на деле принимает объект первым аргументом явно или неявно, а так от функции мало отличается; и всякие Вирты ещё отделяют процедуры, которые что-то делают, временами что-то принимают, но ничего не возвращают.

В мире жабоскрипта этого всего не существует: this есть везде, глобальные функции являются методами глобального объекта (в браузерах window), функции всегда что-то возвращают (если ничего не вернуть явно, undefined вернут за вас). В других языках стройное разделение портят статические глобальные методы, методы-расширения и прочее, что помножает всякую классификацию на ноль.

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

JavaScript Методы чисел

Числовые методы помогут работать с числами.

Числовые методы и свойства

Примитивные значения (например, 3.14 или 2014), не могут иметь свойства и методы (поскольку они не являются объектами).

Но с JavaScript, методы и свойства, также доступны для примитивных значений, так как JavaScript рассматривает примитивные значения в качестве объектов при выполнении методов и свойств.

Метод toString()

Метод toString() возвращает число в виде строки.

Все числовые методы можно использовать для любого типа чисел (литералов, переменных или выражений):

Пример

Метод toExponential()

Метод toExponential() возвращает строку с числом, округленным и записанным с использованием экспоненциальной записи.

Параметр определяет количество знаков после запятой:

Пример

Параметр является необязательным. Если Вы не укажете его, JavaScript не округлит число.

Метод toFixed()

Метод toFixed() возвращает строку с номером записывается с указанным числом десятичных знаков:

Пример

Метод toFixed(2) идеально подходит для работы с деньгами.

Метод toPrecision()

Метод toPrecision() возвращает строку с числом, записанным с указанной длиной:

Пример

Метод valueOf()

Метод valueOf() возвращает число в виде числа.

Пример

В JavaScript число может быть примитивным значением typeof = number или объектом typeof = object .

Метод valueOf() используется внутри JavaScript для преобразования числовых объектов в примитивных значениях.

Нет причин использовать его в коде.

Все JavaScript типы данных имеют valueOf() и метод toString() .

Преобразование переменных в числа

Существует 3 JavaScript метода, которые могут быть использованы в преобразование переменных в числа:

  • Метод Number()
  • Метод parseInt()
  • Метод parseFloat()

Эти методы не числовые, но, зато глобальные методы.

Методы глобальные

Глобальные методы можно использовать для всех типов данных JavaScript.

Это наиболее актуальные методы, при работе с числами:

Метод Описание
Number() Возвращает число, преобразованное из аргумента.
parseFloat() Разбирает свой аргумент и возвращает число с плавающей запятой.
parseInt() Анализирует его аргумент и возвращает целое число.

Метод Number()

Метод Number() , может использоваться для преобразования переменных JavaScript в числах:

Пример

Если число не удается преобразовать, возвращается NaN (не число).

Метод Number() , используемый на датах

Метод Number() можно также преобразовать дату в число:


Пример

Метод Number() выше возвращает количество миллисекунд с момента 1.1.1970.

Метод parseInt()

Метод parseInt() анализирует строку и возвращает целое число. Места разрешенных. Возвращается только первое число:

Пример

Если число не удается преобразовать, возвращается NaN (не число).

Метод parseFloat()

Метод parseFloat() анализирует строку и возвращает число. Места разрешенных. Возвращается только первое число:

Пример

Если число не удается преобразовать, возвращается NaN (не число.

функции в JavaScript

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

Функция — это отдельный блок кода, который состоит из одного или больше операторов. Оно имеет своё собственное(уникальное) название и может принимать различные параметры, в зависимости от которых может выполнит ту или иную операцию.

Метод — это тоже функция, но, он принадлежит уже какому-то классу или объекту.

Для того чтобы вызывать какой-то метод, необходимо сначала написать название объекта, потом через точку написать название метода. Исключением этого правила является вызов методов alert(), confirm() и prompt() объекта window. Их можно вызывать без того чтобы указать название объекта. С этими методами мы уже познакомились в этой статье Описание методов alert, confirm и prompt.

Также, в предыдущих статьях мы познакомились с методом вывода document.write(), который принадлежит объекту document.

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

Синтаксис функции выглядит таким образом:

Для примера создадим простую функцию, которая добавит переданный текст в абзац и выведет его. И ещё сделает его жирным и курсивным.

Сохраняем документ и открываем его в браузере.

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

Для чего нужны функции в программировании?

Основным плюсом использования функции это сокращение размера исходного кода скрипта.

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

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

Параметры функции

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

Давайте создадим функцию без параметров, которая просто выведет на экран, классическую фразу ‘Hello world’.

Любой параметр функции, может иметь своё значение по умолчанию. Это значит, что если при вызове функции мы не передадим какое-то значение данному параметру, то он использует своё значение, которая задано по умолчанию.

Для примера создадим функцию, которая сложит две переданные числа. Если мы передадим только одно число, то, по умолчанию, второе число будет равна 4.

Ещё допускается чтобы внутри какой-то функции можно было бы вызывать другую существующею функцию.

Для примера, вызовем первую созданную нами функцию writeText() внутри предыдущей функции summa(). Функции writeText() передадим результат сложения чисел. В таком случае код функции summa() будет выглядеть уже так:

Функции которые возвращают какое-то значение

До сих пор мы писали функции, которые выводят результат на экран сразу.

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

Для того чтобы лучше понять о чем идёт речь, вспомним такие методы как prompt() и confirm(). Эти методы именно возвращают значение, полученное от пользователя, а не выводят его.

Для примера создадим свою собственную функцию, которая будет возвращать последний элемент массива, переданного в качестве параметра.

Илон Маск рекомендует:  Virtual - Директива Delphi

В результате мы получим слово ‘twix’, так как именно это слово и есть последний элемент массива otherArr.

Метод alert() ничего не возвращает. То есть если мы попытаемся выводить переменную которая типа содержит результат вызова метода alert(), то увидим значение undefined. Это тоже самое как попытаться выводить значение пустой переменной.

Для примера возьмём результат последнего вызова alert() из предыдущего примера, помещаем его в переменную resAlert и используя созданную нами функцию writeText, попытаемся вывести полученный результат.

Как видим в обоих случаях получили значение undefined.

Глобальные и локальные переменные

Глобальные переменные — это те переменные, которые объявлены за пределами функции. То есть все те переменные, которые не объявлены внутри самой функции, являются глобальными. Они видны (действительны) во всем документе.

Локальные переменные — это те переменные, которые объявлены внутри самой функции. И они действительны только внутри данной функции. За её пределами, локальные переменные уже не будут работать.

Локальные и глобальные переменные никак не связаны между собой.

В примере из изображения, если бы мы попытались выводить содержимое переменной x, то получили бы сообщение undefined, потому что мы забыли вызвать функцию other().

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

Вызываем функцию other(), и если теперь попробуем вывести значение переменной x, то в результате увидим цифру 4.

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

Если мы не хотим, чтобы глобальная переменная изменилась, необходимо объявить локальную переменную (можно с таким же именем, как и у глобальной) и все действия будут произведены над ней.

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

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

Задачи

  1. Создайте функцию, которая принимает в качестве параметров две числа и возвращает результат умножения этих чисел.
  2. Выведите полученный результат.

Похожие статьи:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО.

Дата добавления: 2020-10-21 07:30:37

Функции

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

JavaScript Функции

Функция (function) – это самостоятельный фрагмент кода, решающий определенную задачу. Каждой функции присваивается уникальное имя, по которому ее можно идентифицировать и «вызвать» в нужный момент.

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

В JavaScript есть встроенные функции, которые можно использовать в программах, но код которых нельзя редактировать или посмотреть. Примеры встроенных функций вы уже видели – это alert() , prompt() , confirm() и document.write() . Кроме использования встроенных функций, вы можете создать свои собственные, так называемые пользовательские функции.

Объявление и вызов функции

Функция (как и всякий объект) должна быть объявлена (определена) перед её использованием.

Функция JavaScript определяется с помощью ключевого слова function , за которым указываются следующие компоненты:

  • Идентификатор, определяющий имя функции. Чаще всего в качестве имен функций выбираются глаголы или фразы, начинающиеся с глаголов. По общепринятому соглашению имена функций начинаются со строчной буквы.
  • Пара круглых скобок () , которые могут включать имена параметров, разделенных запятыми ( параметр1, параметр2, . ). Эти имена параметров в теле функции могут использоваться как локальные переменные.
  • Пара фигурных скобок <> с инструкциями JavaScript внутри. Эти инструкции составляют тело функции: они выполняются при каждом вызове функции.

Синтаксис функции JavaScript:

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

Этот код выведет нам приветствие в диалоговом окне alert() два раза. Применение функции позволило нам избавиться от дублирования кода.

Обратите внимание, что несмотря на отсутствие параметров, в объявлении функции все равно нужно ставить скобки () после имени. При вызове, после имени функции, также указываются пустые скобки () .

Интерпретатор JavaScript, встречая ключевое слово function , создаёт функцию и переменную с именем этой функции. Переменной присваивается ссылка на функцию.

Обратившись к переменной с именем созданной функции можно увидеть, что в качестве значения там находится функция (а точнее ссылка на неё):

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

«Классическое» объявление функции function имя(параметры) <код>называется в спецификации языка «Function Declaration».

Существует альтернативный синтаксис для объявления функции «Function Expression» (функциональное выражение) – это объявление функции, которое является частью какого-либо выражения (например присваивания):

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

Если у функции нет имени, как в предыдущем примере, она называется «анонимной».

Разница между представленными объявлениями заключается в том, что функции, объявленные как «Function Declaration», создаются интерпретатором до начала выполнения кода (на этапе анализа), поэтому их можно вызвать до объявления:

Функции «Function Expression» (функциональные выражения) создаются в процессе выполнения выражения, в следующем примере функция будет создана при операции присваивания sayHi = function. , поэтому вызов функции до её объявления приведёт к ошибке:

Параметры и аргументы

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

Для определения параметров функции используется следующий синтаксис:

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

Аргументы функции — это значения, которые вы предоставляете функции в момент её вызова.

Для вызова функции с передачей ей аргументов используется следующий синтаксис:

Например, при вызове функции sum ей передаются два аргумента:

Аргументы, передаваемые функции при её вызове, присваиваются параметрам функции в том порядке, в каком они указаны: первый аргумент присваивается первому параметру, второй аргумент – второму параметру и т. д.

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

  1. Если при вызове функции ей передаётся больше аргументов, чем задано параметров, то «лишние» аргументы просто игнорируются и не присваиваются ни одному из параметров данной функции.
  2. Если количество аргументов, передаваемых функции при её вызове меньше, чем было указано параметров при объявлении, то параметрам без соответствующих аргументов присваивается значение undefined . Подобное поведение JavaScript удобно использовать, если некоторые аргументы функции необязательны и могут опускаться.

Типы аргументов, передаваемых функции при её вызове, могут быть как примитивами (строки, числа, логические величины (boolean)), так и объектами (в т.ч. массивы и функции).

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

Например, в коде ниже есть внешняя переменная user , значение которой при запуске функции копируется в параметр функции с тем же именем. Далее функция работает уже с параметром:

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

В этом примере мы видим, что внутри функции myFunc был изменен объект obj , и эти изменения повлияли на этот объект за пределами функции.

Возвращаемые значения

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

Инструкция return имеет следующий синтаксис:

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

Функции в JavaScript

Зачастую нам нужно повторять одни и те же действия в разных частях кода JavaScript. Например, иногда требуется передать сообщение при входе пользователя на сайт, при выходе и в других случаях. Чтобы не повторять тот же код множество раз, используют функции (functions). По сути, функции — это основные «строительные кирпичики» программы на JavaScript.

Примеры встроенных функций: • prompt(message, default); • alert(message); • confirm(question).

Однако в JavaScript можно создавать и свои функции.

Объявление функций в JS

Рассмотрим пример создания function для показа сообщений showMessage() :

В вышеприведённом примере ключевое слово — function, которое идёт в самом начале. Потом прописывается имя функции, затем параметры (в скобках), далее — тело функции (код, выполняемый при вызове).

Объявленная таким образом функция будет доступна по имени:

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

Локальные переменные функции

В функцию могут входить и локальные переменные (объявляются через var). Они видны только внутри функции:

Помните, что блоки while, switch, for, if/else, do..while никак не влияют на зону видимости переменных, то есть при объявлении переменных в данных блоках они будут видны во всей функции. Пример:

При этом неважно, где конкретно в function вы объявляете переменную. Вне зависимости от метода ваших действий объявление сработает одни раз и распространится на всю функцию:

Внешние переменные функции

Функция позволяет вызвать и внешнюю переменную, например:

Доступ возможен на чтение и запись. Но раз переменная внешняя, изменения видны и снаружи функции:

Однако если бы мы внутри функции в строке (1) объявили свою локальную переменную var userName , все обращения задействовали бы её, то есть внешняя переменная не изменилась бы.

Параметры, которые можно вызвать функцией

При вызове function ей можно отправить данные для обработки. Например, нижеследующий код выведет 2 сообщения:

Помните, что когда код будет передан, параметры скопируются в локальные переменные. Также функцию можно вызвать практически с любым количеством аргументов, а если при вызове параметр не будет передан, он считается равным undefined. К примеру, функцию отображения сообщений showMessage(from, text) можно без проблем вызвать, используя один аргумент:

Выбор имени function

При выборе имён в function применяют те же правила, что и когда выбирают имена переменной. Однако следует помнить, что именем должен быть глагол, ведь функция — это действие. Как правило, в качестве имени используют глагольные префиксы, плюс уточнения.

Функцию, которая что-то показывает, называют show (это лучший вариант для имени):

Запуск function, которая что-то получает, называют get, вычисляет — calc и т. д.

Примеры, каким именем можно назвать функцию:

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

Остаётся запомнить, что вне зависимости от метода названия, одна функция — это одно действие. Если функция подразумевает поддействия, желательно выделить их в отдельные функции.

Илон Маск рекомендует:  Что такое код hw_api &#62;link

Функция jQuery() в JavaScript

Говоря о применении функций в JS, нельзя не упомянуть jQuery — известнейшую библиотеку языка программирования JavaScript, благодаря которой осуществляется взаимодействие HTML и JavaScript. Работа с ней начинается с вызова основной функции jQuery() либо $() . Данная функция (function) может выполнять разные действия, что зависит от того, какое значение передать в качестве параметров аргумента.

Какие задачи решаются с помощью этой функции?

В зависимости от параметров возможно выполнение следующих действий: — поиск на основе селектора элементов в DOM-дереве и их возвращение в виде объекта; — оборачивание DOM-элементов, указанных в качестве параметров аргумента, в объект jQuery; — создание DOM-элементов в памяти с помощью HTML-строки, переданной в качестве аргумента функции; — выполнение указанной функции после того, как DOM-дерево окончательно загрузится браузером; — оборачивание простого JavaScript-объекта, содержащего ноль либо больше пар «ключ-значение» в объект jQuery; — клонирование объекта (актуально, если его нужно передать в качестве параметров функции).

Если параметры не указывать, то function возвращает пустой jQuery-объект.

Для примера рассмотрим функцию jQuery(html,attributes) и функцию jQuery(html[,ownerDocument]) .

Функция jQuery(html,attributes)

Function служит для создания DOM-элемента с параметрами. Необходимый элемент указывается в первом аргументе с помощью HTML-строки. Атрибуты к нему указываются во втором аргументе с помощью объекта JavaScript (PlainObject).

Данный способ вызова функции имеет два параметра: • html — обязательный параметр типа htmlString, содержит DOM-элемент; • attributes — необязательный параметр типа PlainObject. Это объект, содержащий атрибуты, методы и события, которые нужно передать создаваемому элементу.

Примечание: необходимо, чтобы HTML-строка начиналась с $.parseHTML() ; — после обработки запускается процесс создания DOM-узлов (применяется браузерный механизм .innerHTML ); — в конечном итоге функция возвращает объект jQuery, включающий созданные DOM-узлы.

Если пользоваться только одним параметром, элементы создаются для текущего документа. Если хотите создать элементы для другого документа, нужно передавать и 1-й, и 2-й параметры.

Ссылки в JS

В заключении поговорим о ссылке в JavaScript. Под ссылкой будем понимать видимую часть текста или кода, нажатие на которую приведёт к переходу по ней. Рассмотрим три основных метода, в результате применения которых образуется кликабельная ссылка.

  • Самый простой метод, позволяющий осуществлять вызов — вывод alert в ссылке. Пример такой ссылки (ссылку можно запустить без проблем из любого браузера):
  • Второй метод вызова ссылки имеет более сложную конструкцию. В этом случае ссылку можно сделать с помощью функции document.write(). А оформить такую ссылку можно следующим образом:
  • В качестве третьего метода продемонстрируем ещё более усложнённый вариант. Ссылка и её вызов осуществляются с помощью переменных, т. к. сама ссылка и её текст выведены в отдельные переменные:

Кроме того, можно вызывать ссылку через таблицу, div, ячейку таблицы и путём использования другого метода. Собственно говоря, использование этих методов для передачи ссылок — довольно странное занятие, если вспомнить, что у нас есть простые, эффективные и всем понятные решения с html и php.

JavaScript для начинающих | Функции

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

Ок! Давайте же уже разберем, что это за звери такие — функции в JavaScript. Бояться их не стоит. Совсем даже наоборот! Без них нам дальше, ну просто никак.

Функции в JavaScript и для чего они нужны

В общем виде функция в JavaScript выглядит так:

function имя_функции() <
переменная 1;
переменная 2;
alert( ‘ переменная 1 + переменная 2 ‘ );
>

Кто уже знаком с версткой сайтов, заметит нечто очень похожее на правила из листа стилей CSS:

#header <
max-width: 1200px;
height: 150px;
margin: 0 auto;
>

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

Как и в листе стилей CSS функции в JavaScript представляют собой некий набор условий и команд в виде целого блока, который можно потом использовать множество раз, не переписывая одни и те же условия и команды, а просто давая ссылку на имя функции.

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

Функции в JavaScript: встроенные и создаваемые

JavaScript имеет множество встроенных функций: alert, prompt, confirm, document.write, Math и др. Мы их пока рассматривать не будем. Как вы уже, наверное, поняли, в JavaScript есть два типа функций: встроенные в язык и создаваемые программистами.

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

Давайте же напишем нашу первую собственную функцию!

Ваша первая собственная функция в JavaScript

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

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

Обратите внимание на две важные особенности этой формы:

1. В тэге form помимо всех обычных для формы параметров прописан специальный атрибут onsubmit. Об атрибутах в JavaScript мы так же говорили во введении. В данном случае атрибут onsubmit служит для вызова функции проверки формы при нажатии на кнопку «Отправить». У нас эта функция, как видите, называется validate_form ().

2. Для поля ввода e-mail адреса мы использовали имя (name) — contact_mail. И это же имя мы прописываем в нашей функции в строке условия:

Внешне наша форма будет выглядеть так:

Что делает функция в JavaScript

Ну, а теперь давайте подробно разберем, что же делает наша функция.

В первой строке после открытия функции мы добавили переменную validation (о переменных будет отдельная статья, не пропустите!). Имя ей можно выбрать произвольное: хоть validation, хоть name_validation, хоть eklmnprst. Главное — это то, что мы присвоили этой переменной значение true, то есть истинно.

Обратите внимание: знак = это вовсе не равно, а именно присваивание. Иначе можно сказать, что левая сторона выражения приняла значение правой стороны и не более того. Знак же равенства в программировании пишется как ==

Далее мы пишем условие, начинающееся с if. Об условиях мы так же поговорим отдельно, т.к. это большая и очень интересная тема. В нашем условии мы задаем путь для проверки значения в параметре value поля e-mail адреса. Если оно пустое, то наша переменная validation сразу принимает значение false — ложно. При этом выскакивает, уже знакомое нам, окошко alert с сообщением «Пожалуйста, заполните поле ‘Ваш e-mail’».

Как вы думаете, почему незаполненное поле выдает ложное значение? Да все просто! В условии мы указываем, что если поле пустое (пустые кавычки в правой части условия после знака равенства ==), то выполняется последующий код условия, в котором срабатывает предупреждение alert. Дальнейшее выполнение кода прерывается. Нам надо закрыть окошко предупреждения и заполнить обязательное поле.

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

В нашем случае страница просто перезагрузится, а поля очистятся, т.к. мы в качестве адресата указали знак решетки #, который возвращает нас на ту же страницу. Но можно туда вписать адрес другой страницы, на которой жирным шрифтом написать, какой же пользователь молодец, и что его данные уже отправлены, куда следует.

Тут есть тоже пара интересных моментов:

1. Путь для проверки условия пишется через знак точки. Это чем-то похоже на адреса в браузерной строке, только там разделителем служит знак слэша /, а здесь просто точка. Иначе можно прочитать наше условие так:

«Если зайти в форму с именем contact_form, а в ней заглянуть в поле contact_mail и там не найти ничего, то сказать пользователю, что он лох».

Обратите внимание на знак ==, о котором я уже упоминал. Здесь задается именно равенство, а не присваивание.

2. Само условие if так же имеет свой набор правил, взятых в фигурные скобки. Это, так называемое, тело цикла. Пока просто запомните это название, оно вам пригодится в будущем.

Способы применения функций в JavaScript

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

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

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

JavaScript: Функции

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

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

Объявление и вызов функции

Существует три способа объявления функции: Function Declaration, Function Expression и Named Function Expression.

Function Declaration (сокращённо FD) – это «классическое» объявление функции. В JavaScript функции объявляются с помощью литерала функции. Синтаксис объявления FD:

Литерал функции состоит из следующих четырёх частей:

  1. Ключевое слово function .
  2. Обязательный идентификатор, определяющий имя функции. В качестве имени функции обычно выбирают глагол, т. к. функция выполняет действие.
  3. Пара круглых скобок вокруг списка из нуля или более идентификаторов, разделяемых запятыми. Данные идентификаторы называются параметрами функции.
  4. Тело функции, состоящее из пары фигурных скобок, внутри которых располагаются инструкции. Тело функции может быть пустым, но фигурные скобки должны быть указаны всегда.

Встречая ключевое слово function интерпретатор создаёт функцию и затем присваивает ссылку на неё переменной с именем sayHi (переменная с данным именем создаётся интерпретатором автоматически).

Обратившись к переменной sayHi можно увидеть, что в качестве значения там находится функция (на самом деле ссылка на неё):

Function Expression (сокращённо FE) – это объявление функции, которое является частью какого-либо выражения (например присваивания). Синтаксис объявления FE:

Функцию FE иначе ещё называют » анонимной функцией «.

Named Function Expression (сокращённо NFE) – это объявление функции, которое является частью какого-либо выражения (например присваивания). Синтаксис объявления NFE:

Объявления FE и NFE обрабатываются интерпретатором точно так же, как и объявление FD: интерпретатор создаёт функцию и сохраняет ссылку на неё в переменной sayHi.

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

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

Функции, объявленные как FE или NFE, создаются в процессе выполнения кода, поэтому их можно вызывать только после того как они объявлены:

Функции, объявленные внутри блока, находятся в блочной области видимости:

В отличие от FE, функция, объявленная как NFE, имеет возможность обращаться к себе по имени при рекурсивном вызове. Имя функции доступно только внутри самой функции:

Функция обратного вызова

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

Функции обратного вызова часто используются, в качестве обработчиков событий.

Ниже приведён пример функции, принимающей в качестве своего аргумента ссылку на другую функцию для её последующего вызова:

Этот пример наглядно демонстрирует принцип действия обратного вызова.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL