Конспект «основы javascript»

Содержание:

10) addEvent()
Как позвонить в Билайн
Блоки кода и циклы, IIFE
«this» не является фиксированным
Циклы
Переменные
Основные типы
Точка с запятой
Приоритет операторов
Другие технологии. Альтернативы javascript.
Изучаем программирование на JavaScript
Читайте также:
Профессия «Frontend-разработчик» от Skillbox
Функции

10) addEvent()

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

function addEvent(elem, evType, fn) {
	if (elem.addEventListener) {
		elem.addEventListener(evType, fn, false);
	}
	else if (elem.attachEvent) {
		elem.attachEvent('on' + evType, fn)
	}
	else {
		elem = fn
	}
}

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

Основной его недостаток — в том, он не передает в обработчик для IE. Точнее, этого не делает .

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

elem.attachEvent("on"+evType, function() { fn.apply(elem) })

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

Существует два варианта обхода проблемы:

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

function addEvent(elem, evType, fn) {
	if (elem.addEventListener) {
		elem.addEventListener(evType, fn, false)
                return fn
	}

        iefn = function() { fn.call(elem) } 
        elem.attachEvent('on' + evType, iefn)
	return iefn
}

function removeEvent(elem, evType, fn) {
	if (elem.addEventListener) {
		elem.removeEventListener(evType, fn, false)
                return
	}
 
        elem.detachEvent('on' + evType, fn)
}

Используется так:

function handler() { 
    alert(this) 
}
var fn = addEvent(elem, "click", handler)
...
removeEvent(elem, "click", fn)

Можно не использовать в обработчике события вообще, а передавать элемент через замыкание:
```
function handler() { 
   // используем не this, а переменную, ссылающуюся на элемент
    alert(*!*elem*/!*) 
}
...
```

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

Как позвонить в Билайн

Основы работы с javascript

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

Короткий номер оператора

Самый простой и бесплатный вариант – вызов на короткий номер оператора Билайн. Для этого вам не нужны средства на счету. Со своего личного мобильного необходимо набрать 0611 – и вы попадете в меню технической поддержки оператора. Далее порядок действий такой:

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

Заказать обратный звонок

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

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

Федеральный номер Билайн

Звонить можно сразу на федеральный номер компании, если возникает такая необходимость. Есть несколько вариантов, которые используется при необходимости поговорить по конкретной проблеме. Используйте такие номера для:

узнать решение проблем с модемами –;
настройки интернета на мобильном и возникающие с ним проблемы – 8;
подсказать решение проблем с домашним интернетом, ТВ, телефоном –.

Блоки кода и циклы, IIFE

10 методов для замены jquery чистым javascript в проектах

Предыдущие примеры сосредоточены на функциях. Но лексическое окружение существует для любых блоков кода .

Лексическое окружение создаётся при выполнении блока кода и содержит локальные переменные для этого блока. Вот пара примеров.

В следующем примере переменная существует только в блоке :

Когда выполнение попадает в блок , для этого блока создаётся новое лексическое окружение.

У него есть ссылка на внешнее окружение, так что может быть найдена. Но все переменные и Function Expression, объявленные внутри , остаются в его лексическом окружении и не видны снаружи.

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

Для цикла у каждой итерации своё отдельное лексическое окружение. Если переменная объявлена в , то она также в нём:

Обратите внимание: визуально находится снаружи. Но конструкция – особенная в этом смысле, у каждой итерации цикла своё собственное лексическое окружение с текущим в нём

И так же, как и в , ниже цикла невидима.

Мы также можем использовать «простые» блоки кода , чтобы изолировать переменные в «локальной области видимости».

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

Это может произойти, если название переменной – широко распространённое слово, а авторы скрипта не знают друг о друге.

Если мы хотим этого избежать, мы можем использовать блок кода для изоляции всего скрипта или какой-то его части:

Из-за того, что у блока есть собственное лексическое окружение, код снаружи него (или в другом скрипте) не видит переменные этого блока.

В прошлом в JavaScript не было лексического окружения на уровне блоков кода.

Так что программистам пришлось что-то придумать. И то, что они сделали, называется «immediately-invoked function expressions» (аббревиатура IIFE), что означает функцию, запускаемую сразу после объявления.

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

IIFE выглядит так:

Здесь создаётся и немедленно вызывается Function Expression. Так что код выполняется сразу же и у него есть свои локальные переменные.

Function Expression обёрнуто в скобки , потому что, когда JavaScript встречает в основном потоке кода, он воспринимает это как начало Function Declaration. Но у Function Declaration должно быть имя, так что такой код вызовет ошибку:

Даже если мы скажем: «хорошо, давайте добавим имя», – это не сработает, потому что JavaScript не позволяет вызывать Function Declaration немедленно.

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

Кроме скобок, существуют и другие пути показать JavaScript, что мы имеем в виду Function Expression:

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

«this» не является фиксированным

Javascript

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

В этом коде нет синтаксической ошибки:

Значение вычисляется во время выполнения кода и зависит от контекста.

Например, здесь одна и та же функция назначена двум разным объектам и имеет различное значение «this» при вызовах:

Правило простое: при вызове значение внутри равно . Так что, в приведённом примере это или .

Вызов без объекта:

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

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

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

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

Последствия свободного

Если вы до этого изучали другие языки программирования, тогда вы, скорее всего, привыкли к идее «фиксированного » – когда методы, определённые внутри объекта, всегда сохраняют в качестве значения ссылку на свой объект (в котором был определён метод).

В JavaScript является «свободным», его значение вычисляется в момент вызова метода и не зависит от того, где этот метод был объявлен, а зависит от того, какой объект вызывает метод (какой объект стоит «перед точкой»).

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

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

Циклы

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

Чаще всего в JavaScript используется цикл . Этот цикл обычно состоит из переменой, которой присваивается числовое значение, затем эта переменная используется с оператором сравнения для проверки условия, а в конце числовое значение переменной увеличивается или уменьшается. В ходе сравнения в цикле обычно определяется, что числовое значение исходной переменной больше или меньше определенного числового значения. Если это условие выполняется (равно ), то цикл выполняется и значение переменной увеличивается или уменьшается, пока условие не станет равным . В листинге 22 приведен пример цикла , работающего, пока числовое значение переменной меньше длины массива.

Листинг 22. Листинг 22. Использование цикла for для итерирования по массиву

var colors = new Array("orange", "blue", "red", "brown");
for(var i=0; i<colors.length; i++)
{
    document.write("цвет: "+ colors +"<br/>");
}

Свойство (длина) у массива содержит числовое значение, равное количеству элементов в массиве. Не забывайте, что индексация массива начинается с 0. Поэтому если в массиве 4 элемента, то значение равно 4, а доступные индексы – 0, 1, 2, 3.

Другой тип цикла — цикл . Считается, что этот цикл работает «быстрее» цикла , но он не очень подходит для итерирования по массивам, и его лучше применять в случаях, когда необходимо выполнять сценарий до тех пор, пока условие истинно. В листинге 23 приведен исходный код цикла , в котором сценарий выполняется до тех пор, пока значение численной переменной меньше 10.

Листинг 23. Листинг 23. Синтаксис цикла while

var i = 0;
while(i<10)
{
   document.write(i +"<br/>");
   i++;
}

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

Переменные

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

Таблица 1. Таблица 1. Выражения JavaScript

Выражение	Описание
Арифметическое	вычисляется в число
Строковое	вычисляется в строку
Логическое	вычисляется в Boolean-значение ( или )

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

В листинге 4 приведен пример локальной переменной , которой присвоено значение 10.

Листинг 4. Листинг 4. Объявление локальной переменной

var num = 10;

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

Листинг 5. Листинг 5. Получение доступа к значению переменной

document.write("значение num равно: "+ num);

Результатом этого выражения будет «значение num равно: 10». Функция выводит данные на Web-страницу. Эта функция будет использоваться на протяжении всей статьи для вывода результатов работы примеров на Web-страницу.

Чтобы сохранить арифметическое выражение в переменной, достаточно присвоить переменной вычисленное значение, как показано в листинге 6. В переменной будет храниться вычисленный результат, а не само выражение. При этом на странице снова будет напечатано «значение num равно: 10».

Листинг 6. Листинг 6. Хранение арифметических выражений

var num = (5 + 5);
document.write("значение num равно: "+ num);

Для изменения значения переменной следует сослаться на неё по имени и присвоить ей новое значение с помощью знака = (см. листинг 7). Разница заключается в том, что в этом случае не требуется использовать ключевое слово , так как переменная уже объявлена.

Листинг 7. Листинг 7. Изменить значение существующей переменной

var num = 10;
document.write("значение num равно: "+ num);

// присвоить переменной значение 15
num = 15;
document.write("новое значение num равно: "+ num);

В результате запуска сценария на странице будет напечатано «значение num равно: 10», а затем «новое значение num равно: 15».

Кроме переменных, этот раздел знакомит с операторами языка, которые подробно рассматриваются далее. Знак равенства «=», используемый для присвоения значений переменным, — это оператор присваивания, а знак «+», используемый для сложения «5+5», — это арифметический оператор. В следующем разделе описаны все операторы, присутствующие в языке JavaScript, и правила их использования.

Основные типы

Для объявления строк используются кавычки — простые или двойные . Между ними нет никакой разницы.

a = 'моя'
b = "строка"

Для конкатенации строк используется оператор .

a = "моя"
b = "строка"
alert(a + ' ' + b)

Более подробно строки и другие базовые типы рассмотрены в статье Базовые типы: Строки, Числа, Boolean.

Javascript — объектный язык. В нем все является объектами. Строки, числа, функции и массивы — все это объекты со своими методами и свойствами. Это надо знать и иметь в виду с самого начала.

Методы объектов вызываются через точку. Например, у строки String есть метод toUpperCase, возвращающий строку в верхнем регистре:

name = "Vasya"

alert( name.toUpperCase() )

Или даже так:

alert( "Vasya".toUpperCase() )

Практически всё в javascript делается при помощи вызова методов различных объектов.

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

В javascript есть два основных способа объявить массив.

Для массива с числовыми индексами обычно используется объект типа Array.

arr = new Array("my", "array")
alert(arr.length)  // 2

Свойство length содержит длину массива, которая всегда равна последнему индексу (в примере выше — это 1) плюс один.

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

arr = 
alert(arr) // "my" <- нумерация от нуля

Новые элементы можно добавить в конец методом push.
Для перебора значений используется цикл .

arr = 
arr.push("третий")

for(var i=0; i<arr.length; i++) {
  alert(arr) 
}

Более подробно массивы с числовыми индексами рассмотрены в статье Массивы .

Для массивов, ключи которых являются строками, используется Object.
Следующая запись задает ассоциативный массив с ключами и :

obj = { 
  n: 1,
  str: "Вася"
}

Для получения свойства объекта используется оператор-аксессор: точка либо квадратные скобки.

obj = {   n: 1,  str: "Вася" }

alert(obj.n) // точка 
alert(obj)

Квадратные скобки позволяют получать свойство по переменной-ключу.

var key = "str"
alert(obj)

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

При обращении к отсутствующему свойству возвращается специальное значение undefined.

a = { }  // пустой объект
alert(a.something)  // undefined
alert(a.blabla === undefined)

В примере был использован оператор сравнения без приведения типа.

Более подробно о том, как перебирать ключи массива, и о самих объектах — вы можете узнать из статьи Объекты Javascript в примерах.

Точка с запятой

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

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

В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется .

В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!

В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:

Код выведет , потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком , значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.

Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.

Ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять.

Пример ошибки

Если вы хотите увидеть конкретный пример такой ошибки, обратите внимание на этот код:

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

А теперь добавим перед кодом и не поставим в конце точку с запятой:

Теперь, если запустить код, выведется только первый , а затем мы получим ошибку!

Всё исправится, если мы поставим точку с запятой после :

Теперь мы получим сообщение «Теперь всё в порядке», следом за которым будут и .

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

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

Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз – в большинстве случаев можно не ставить точку с запятой. Но безопаснее, особенно для новичка, ставить её.

Приоритет операторов

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

Из школы мы знаем, что умножение в выражении выполнится раньше сложения. Это как раз и есть «приоритет». Говорят, что умножение имеет более высокий приоритет, чем сложение.

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

В JavaScript много операторов. Каждый оператор имеет соответствующий номер приоритета. Тот, у кого это число больше, – выполнится раньше. Если приоритет одинаковый, то порядок выполнения – слева направо.

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

Приоритет	Название	Обозначение
…	…	…
17	унарный плюс
17	унарный минус
16	возведение в степень
15	умножение
15	деление
13	сложение
13	вычитание
…	…	…
3	присваивание
…	…	…

Так как «унарный плюс» имеет приоритет , который выше, чем у «сложения» (бинарный плюс), то в выражении сначала выполнятся унарные плюсы, а затем сложение.

Другие технологии. Альтернативы javascript.

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

Java — по сравнению с javascript, java-applet’ы тяжелые, долго загружаются, но могут все. Они, как правило, используются там, где требуется почти-десктоп приложение. Очень сильно java’у потеснила технология Flash.

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

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

Мощные средства для создания сетевых соединений(сокеты)
Объекты для работы с мультимедиа: изображениями, аудио, видео
Внутреннее хранилище объектов, которые не посылаются на сервер при каждом запросе, как куки.
Удобные графические средства разработки для Flash

Ну и для баланса — недостатки, по сравнению с javascript.

Отдельный контейнер. Например, нельзя выделить участок текста, частично находящегося в контейнере Flash.
Плохо индексируется поисковиками. Поисковики ходят по HTML-ссылкам, но(пока?) не кликают по ссылкам внутри Flash-приложения.

Из Flash можно легко вызвать javascript. Наоборот — сложнее, но тоже возможно, поэтому целесообразно знать обе технологии и применять их вместе.

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

Пока они все далеки по распространенности от javascript и flash.

JavaFX — «легкая» надстройка над Java, будет работать только с Java на компьютере клиента.
XUL — язык описания интерфейсов, удобен если писать планируете только под Mozilla. Также используется для написания десктоп-приложений.
Silverlight — конкурент Flash от Microsoft на основе .NET. Другими OS, кроме Windows, поддерживается слабо. Не имеет широкого распространения.
vbscript — попытка Microsoft сделать подобие javascript на основе Visual Basic. Не развивается, сильно уступает по возможностям, и, как следствие — практически не используется в современном веб-программировании.

Изучаем программирование на JavaScript

Эрик Фримен, Элизабет Робсон

«Изучаем программирование на JavaScript»

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

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

Профессия «Frontend-разработчик» от Skillbox

Длительность	10 месяцев
Уровень	Нулевой
Для кого подходит	Для начинающих
Формат	Видео-лекции + практическая работа+ консультация куратора
Гарантии	Стажировки в компаниях партнёров
Итоги	Диплом + 2 собственных проекта в резюме
Цена	● полная – 132 000 руб; ● со скидкой – 79 200 руб; ● рассрочка – 3 300 руб./мес.
Ссылка на курс	Узнать подробнее

верстка сайта;
JavaScript;
Git;
jQuery;
английский для IT-сферы.

Преподаватели:

Даниил Пилипенко, Егор Яковишен.

Подробнее о полном преподавательском составе узнать.

Впечатления: курс, с которого можно смело начинать карьеру. За 10 месяцев вы изучите все аспекты работы с фронтендом. Также вы прокачаете личные качества, которые помогут вам в карьере. А еще получите карту развития разработчика, которая пригодится вам, чтобы стать senior-разработчиком.

Получить скидку →

Подписывайтесь на наши новости

Одно письмо в неделю с самыми актуальными статьями + обзор digital-профессий!

*Нажимая «Подписаться» вы даете согласие на обработку персональных данных.

Функции

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

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

Листинг 19. Листинг 19. Пример простой функции

var num = 10;
function changeVariableValue()
{
   num = 11;
}
changeVariableValue();
document.write("num равно: "+ num);

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

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

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

В листинге 20 приведен пример функции, имеющей параметры, и вызова функции с использованием аргументов.

Листинг 20. Листинг 20. Использование параметров функций

var num = 10;
function increase(_num)
{
   _num++;
}
increase(num);
document.write("num равно: "+ num);

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

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

Листинг 21. Листинг 21. Использование выражения return в функции

function add(_num1, _num2)
{
   return _num1+_num2;
}
var num = add(10, 10);
document.write("num равно: "+ num);

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