Встреча № 7
Метки инструкций
Любая инструкция может быть помечена указанным перед ней идентификатором: идентификатор: инструкция
Как выглядит в коде:
metka: for(let i = 10; I; i--){
//тело цикла
}
Помечая инструкцию, вы тем самым даете ей имя, которое затем можно будет использовать в качестве ссылки в любом месте в программе.
Пометить можно любую инструкцию, однако помечать имеет смысл только инструкции, имеющие тело, такие как циклы и условные инструкции. Присвоив имя циклу, его затем можно использовать в инструкциях break и continue, внутри цикла для выхода из него или для перехода в начало цикла, к следующей итерации.
Идентификатор, используемый в качестве метки инструкции, может быть любым допустимым идентификатором JavaScript, кроме зарезервированного слова. Имена меток отделены от имен переменных и функций, поэтому в качестве меток допускается использовать идентификаторы, совпадающие с именами переменных или функций.
Метки инструкций определены только внутри инструкций, к которым они применяются (и, конечно же, внутри вложенных в них инструкций).
Вложенные инструкции не могут помечаться теми же идентификаторами, что и вмещающие их инструкции, но две независимые инструкции могут помечаться одинаковыми метками.
Помеченные инструкции могут помечаться повторно. То есть любая инструкция может иметь множество меток.
Инструкция break
Инструкция break приводит к немедленному выходу из самого внутреннего цикла или инструкции switch (мы с ней уже знакомились).
Синтаксис ее прост: break;
Ранее мы уже знакомились с использованием инструкции break внутри инструкции switch. В циклах она обычно используется для немедленного выхода из цикла, когда по каким-либо причинам требуется завершить выполнение цикла.
В языке JS допускается указывать имя метки за ключевым словом break (идентификатор без двоеточия): break имя_метки; Когда инструкция break используется с меткой, она выполняет переход в конец именованной инструкции. В случае отсутствия инструкции с указанной меткой попытка использовать такую форму инструкции break порождает синтаксическую ошибку.
Именованная инструкция не обязана быть циклом или инструкцией switch: инструкция break с меткой может выполнять «выход» из любой вмещающей ее инструкции. Объемлющая инструкция может даже быть простым блоком инструкций, заключенным в фигурные скобки исключительно с целью пометить его.
Важно!
Между ключевым словом break и именем метки не допускается вставлять символ перевода строки.
Инструкция continue
Инструкция continue должна использоваться только внутри циклов. Она схожа с инструкцией break, однако вместо выхода из цикла инструкция continue запускает новую итерацию цикла.
Синтаксис инструкции прост: continue;
Инструкция continue может также использоваться с меткой: continue имя_метки;
Когда выполняется инструкция continue, текущая итерация цикла прерывается и начинается следующая. Для разных типов циклов это означает разное:
· В цикле while указанное в начале цикла выражение проверяется снова, и если оно равно true, тело цикла выполняется с начала.
· В цикле do/while происходит переход в конец цикла, где перед повторным выполнением цикла снова проверяется условие.
· В цикле for вычисляется выражение инкремента и снова вычисляется выражение проверки, чтобы определить, следует ли выполнять следующую итерацию.
Обратите внимание на различия в поведении инструкции continue в циклах while и for: цикл while возвращается непосредственно к своему условию, а цикл for сначала вычисляет выражение инкремента, а затем возвращается к условию. Поскольку инструкция continue ведет себя в этих двух циклах по-разному, точно имитировать цикл for с помощью одного цикла while невозможно.
Важно!
Как и для инструкции break, переводы строк между ключевым словом continue и именем метки не допускаются.
Функции
Представьте, что у вас на работе появился новый ассистент, который готов помочь вам в любом деле. Например, вы проголодались и захотели кусочек пиццы, но, поскольку помощник еще не знаком с планом здания, вы должны дать ему подробные инструкции: «Выйди из кабинета, поверни направо к лифту...». В следующий раз ассистент уже будет знать, где готовят пиццу, поэтому вы просто говорите: «Принеси мне кусочек пиццы», он идет в пиццерию и приносит пиццу. Другими словами, вам нужно дать подробные инструкции только один раз. Ваш ассистент запомнит необходимые шаги. И если вы скажете: «Принеси мне кусочек», он мгновенно исчезнет, а через некоторое время появится с пиццей.
В языке JavaScript есть подобный механизм, называемый функцией. Функция — это серия шагов программирования, которые вы задаете в начале сценария — то же, что и подробные инструкции для ассистента. Эти шаги не выполняются при создании функции, вместо этого они сохраняются в памяти браузера, и вы вызываете их, когда это необходимо.
Функции бесценны для выполнения нескольких шагов программы с определенной периодичностью. Например, вы создали на веб-странице фотогалерею, состоящую из 50 эскизов фотографий. Если кто-то щелкнет мышью по маленькой фотографии, вам нужно, чтобы страница потускнела, отобразился заголовок, и экран заполнила большая версия изображения. Каждый раз, когда кто-нибудь щелкнет кнопкой мыши по картинке, процесс повторится. Таким образом, на странице, содержащей 50 маленьких фотографий, ваш сценарий выполнит одну и ту же серию шагов 50 раз. К счастью, вам не придется писать один и тот же код 50 раз, чтобы ваша фотогалерея работала. Вместо этого вы можете записать функцию со всеми необходимыми шагами, а затем эта функция будет выполняться при каждом щелчке по эскизу. Вы пишете код только один раз, но выполняете его, когда хотите.
Основная структура функции выглядит так:
function имяфункции() {
// код JavaScript, который необходимо выполнить
}
Ключевое слово function дает интерпретатору JS знать, что вы создаете функцию.
Далее вы указываете имя функции (как и в случае с переменной, вы вольны выбрать любое имя. Следуйте тем же правилам, что и при наименовании переменных). Кроме того, обычной практикой считается включение в имя функции глагола, например, updatePage или fadeImage. Глагол дает ясное представление о том, что делает функция, и помогает отличить функцию от переменной.
После имени добавьте пару скобок, являющихся другой характеристикой функции.
После скобок — пробел, за которым следует фигурная скобка, одна или более строк кода JS и, наконец, закрывающая фигурная скобка. Как и в случае с инструкциями if, фигурные скобки определяют начало и конец фрагмента кода функции.
Функции, которые будут использованы в ходе выполнения сценария, программисты обычно помещают в начало программы.
Важно!
Помните, что функция не запускается сразу после создания, — это все равно, что рассказать ассистенту, где находится пицца, но не послать его за ней.
Код JavaScript, записанный в виде функции, просто сохранен в памяти браузера, ожидая, что позднее, когда он понадобится, его запустят. Но как запустить функцию? Говоря языком программистов, вы вызываете функцию, когда желаете, чтобы она выполнила свою задачу.
Вызвать функцию — значит записать ее имя, за которым следует пара скобок. Например, вы запускаете функцию printToday, набрав следующее: printToday(); Как видно, для запуска функции не нужно много печатать. Будучи однажды созданной, она не требует дополнительного кода, чтобы выдать результат.
Важно!
Вызывая функцию, не забудьте поставить в конце скобки, которые ее запускают. Например, запись printToday ни к чему не приведет, а запись printToday() выполнит функцию.
Передача данных функциям
Функции еще более полезны, если вы сообщаете им необходимую информацию. Вернемся к вашему ассистенту — парню, приносящему пиццу. Первичная «функция», описанная ранее, заключалась в том, чтобы отправиться в пиццерию, купить порцию и вернуться в офис. Пожелав пиццы, вы «вызвали» функцию, попросив ассистента: «Принеси мне кусочек пиццы!». Конечно же, в зависимости от настроения, вы можете захотеть кусочек пряной, сырной или оливковой пиццы. Чтобы ваши инструкции были более точными, расскажите ассистенту, чего именно вы желаете. Каждый раз, заказывая пиццу, вы можете выбрать иной тип.
Функции JavaScript способны воспринимать информацию, называемую параметрами или аргументами, которые они используют для выполнения своих действий. Например, вы хотите создать функцию для расчета общей стоимости заказа посетителя, поэтому должны сообщить ей, сколько стоит товар и сколько единиц заказано. Для начала, создавая функцию, поместите имя новой переменной в круглые скобки — это параметр.
Основная структура будет выглядеть так:
function имяФункции (аргумент) {
// код JavaScript, который необходимо выполнить
}
Параметр (аргумент) — это просто переменная, поэтому вы можете выбрать любое допустимое для нее имя.
Например, вы хотите сэкономить несколько нажатий на клавиши каждый раз, когда набираете код для отображения чего-либо на странице. Вы создаете простую функцию, позволяющую заменить функцию браузера document. write () более кратким именем:
function print(message) {
document.write(message);
}
Имя функции — print, у нее есть один параметр — message. Когда вы вызываете функцию, она получает информацию (сообщение, которое необходимо напечатать), а затем с использованием команды document. write () выводит сообщение на страницу.
Конечно, функция ничего не делает, пока вы ее не запустите, поэтому где-нибудь в другом месте вашего кода вы должны вызвать эту функцию таким образом: print (”Привет, мир.”); Во время выполнения этого кода вызывается функция print и ей посылается строка “Привет, мир.”, которую она выводит на страницу.
Технически процесс посылания информации функции называется передачей аргумента. В данном примере текст 'Привет, мир.' — это аргумент. Аргументы — это значения, передаваемые функции, которые соответствуют параметрам, определенным при создании функции.
Функция не ограничена одним параметром. Вы можете присвоить ей любое количество аргументов. Вам просто нужно указать каждый параметр в функции через запятую, например:
function имяФункции (параметр1, параметр2, параметрЗ) {
// код JavaScript, который необходимо выполнить
}
А затем вам нужно вызвать функцию с тем же количеством аргументов, в том же порядке:
имяФункции(аргумент1, аргумент2, аргумент3);
В данном примере при вызове функции аргумент 1 сохранен в переменной параметр1, аргумент2 — в параметр2 и т. д.
Расширяя функцию, приведенную выше, вы, допустим, хотите не только напечатать сообщение на веб-странице, но и задать HTML-элемент (тег) для выделения его в остальном тексте. Так вы можете оформить сообщение как заголовок абзаца.
Новая функция будет выглядеть следующим образом:
function print(message, tag) {
document.write ('<'+ tag +'>'+ message + '<'+ tag +'>');
}
Вызов функции будет выглядеть следующим образом:
print(‘Привет, мир ’, ‘р‘);
В данном случае вы присваиваете функции два аргумента: Привет, мир. и р Эти значения сохранены в двух переменных: message и tag. В результате на странице появляется новый абзац: <р>Привет, мир</р>.
Важно!
Вы можете присваивать функциям не только последовательности символов, но и любой тип переменной JavaScript, массив, число или логическое значение.
Запрос данных от функций (Инструкция return)
Иногда функция просто делает что-то, например, выводит на страницу сообщение, перемещает объект по экрану, проверяет элементы формы. Но иногда необходимо получить от функции какие-то данные как результат ее работы, ведь от функции «Принеси мне кусочек пиццы» будет мало толку, если в результате вы ничего не получите. Точно также, функция, вычисляющая общую стоимость товаров в корзине, не будет слишком полезной, если не сообщит вам окончательную стоимость.
Некоторые функции, встроенные в JavaScript, как мы уже видели, возвращают значения. Например, команда prompt() выводит диалоговое окно с текстом, и то, что пользователь вводит в него, возвращается. Как вы уже знаете, можно сохранить возвращенное значение в переменной и что-нибудь с ним сделать:
var answer = prompt (“В каком месяце вы родились?”);
Ответ посетителя, введенный в диалоговое окно, сохраняется в переменной answer. Вы можете проверить значение этой переменной, используя управляющие инструкции или произвести над ней любые действия, предусмотренные в языке JavaScript.
Как вы помните, вызов функции является выражением и подобно всем выражениям имеет значение. Инструкция return внутри функций служит для определения значения, возвращаемого функцией.
Инструкция return имеет следующий синтаксис: return выражение;
Важно!
Инструкция return может располагаться только в теле функции. Присутствие ее в любом другом месте является синтаксической ошибкой.
Когда выполняется инструкция return, функция возвращает значение выражения вызывающей программе. Например:
function square(x) {
return x*x; // Возврат значения
}
square(2) // Этот вызов вернет 4
Если функция не имеет инструкции return, при ее вызове интерпретатор будет выполнять инструкции в теле функции одну за другой, пока не достигнет конца функции, и затем вернет управление вызвавшей ее программе. В этом случае выражение вызова вернет значение undefined.
Инструкция return часто является последней инструкцией в функции, но это совершенно необязательно: функция вернет управление вызывающей программе, как только будет достигнута инструкция return, даже если за ней следуют другие инструкции в теле функции.
Инструкция return может также использоваться без выражения, тогда она просто прерывает выполнение функции и возвращает значение undefined вызывающей программе.