Автор: Кан Марк

Название: Основы программирования на JavaScript

Лекция 2. Операторы и функции

При тестировании сценария, написанного в предыдущей лекции, можно заметить, что результат, получаемый из prompt, требует некоторой проверки. Когда сценарий спрашивает, сколько яблок желает съесть пользователь, то пользователь может ввести число больше 5, меньше 0 или что-то, что вообще не является числом. В каждом из таких случаев желательно информировать пользователей, что введено недопустимое значение.

Так как в этом сценарии имеется только 5 яблок, то это максимальное количество яблок, которое может получить пользователь. Поэтому начнем с проверки, что введенное число не больше 5.

var apples = 5; alert('Имеется ' + apples + ' яблок!'); var eat = prompt('Сколько яблок вы хотите съесть?', '1'); var eaten = parseInt(eat); if(eaten gt; 5){ alert('Простите, но имеется только 5 яблок.' + 'Вы не можете съесть ' + eaten + ' яблок!'); } else { apples -= eaten; alert('А теперь имеется только ' + apples + ' яблок!'); }

Основными новыми понятиями здесь являются операторы if и else. Операторы if и else достаточно легко понять. Приведенный выше код дает возможность сказать: "Если пользователь выбрал для еды более 5 яблок, то сообщите ему, что такого количества яблок нет. Иначе позвольте ему съесть столько яблок, сколько он попросит.".

Основной синтаксис оператора if / else следующий:

if(условие){ // код, который выполняется, когда справедливо условие if } else { // код, который выполняется, когда условие if ложно }

Необходимо отметить открывающую и закрывающую скобки, { и }, в приведенном выше коде. Открывающая скобка сообщает коду, где начинается блок кода, а закрывающая скобка указывает коду, где блок заканчивается. Поэтому все между { и } выполняется как часть оператора if. Необходимо отметить, что закрывающая скобка оператора if размещается непосредственно перед ключевым словом else. Оператор else имеет свой собственный набор скобок и свой собственный блок для выполнения.

Две косые черты // в приведенном примере говорят коду, что здесь находится комментарий. Комментарий является частью кода, который не выполняется. Они обычно используются для описания функций реального кода, чтобы не требовалось изучать код для выяснения, что он делает. Если, например, имеется очень длинный фрагмент кода, который проверяет входящие данные формы, то будет вполне разумно вставить комментарий, говорящий что-нибудь вроде "Следующий код проверяет ввод пользователя в форму". В этом случае любой, кто будет просматривать код, или сам автор кода несколько месяцев спустя после написания, сразу поймет, что этот код делает.

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

// это однострочный комментарий /* если требуется более длинный комментарий, то лучше использовать "блочный комментарий". Этот комментарий является блочным комментарием, и полностью игнорируется при выполнении кода */

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

Вернемся к нашему оператору if,

if(eaten gt; 5){ alert('Простите, но имеется только 5 яблок. Вы не можете съесть ' + eaten + ' яблок!'); } else { apples -= eaten; alert('А теперь имеется только ' + apples + ' яблок!'); }

Можно видеть, что условием является eaten gt; 5. Знак gt; означает "больше чем", так что это условие означает "если eaten больше 5". Аналогично, lt; означает "меньше чем".

Существует два других аналогичных знака gt;= и lt;=, которые означают "больше чем или равно" и "меньше чем или равно" соответственно.

В приведенном выше коде мы сообщаем пользователю о том, что он ввел значение больше 5 яблок. Только если он выбрал меньше 5 яблок, это число вычитается из текущего количества яблок и затем пользователю сообщается, сколько яблок осталось. Однако существует еще два возможных случая. Что, если пользователь введет число меньше 0? Что, если он введет значение, которое не является числом? Первый случай читатель может теперь обработать самостоятельно. Второй случай требует использования другой встроенной функции, isNaN. При попытке преобразовать что-нибудь в число с помощью функции parseInt, возвращается значение NaN, если функция не может выполнить операцию. NaN означает Not a Number (Не число). Если вызвать функцию parseInt, например, со значением apple, то будет получено значение NaN, так как слово apple не является числом.

var apples = 5; alert('Имеется ' + apples + ' яблок!'); var eat = prompt('Сколько яблок вы хотите съесть?', '1'); var eaten = parseInt(eat); if(isNaN(eaten)){ alert('Вы должны ввести допустимое число яблок!'); } else if(eaten gt; apples){ alert('Простите, но имеется только ' + apples + ' яблок. Вы не можете съесть ' + eaten + ' яблок!'); } else if(eaten lt; 0){ alert('Простите, но вы не можете съесть отрицательное количество яблок!'); } else { apples -= eaten; alert('А теперь имеется только ' + apples + ' яблок!'); }

Теперь все это должно быть понятно читателю. Прежде всего проверяется, что введено допустимое значение. Если значение недопустимо, выводится соответствующее сообщение. Затем проверяется, что введенное число не превышает количество существующих яблок, а затем - что это число не является отрицательным. Если все эти проверки проходят успешно, пользователь сможет съесть столько яблок, сколько захочет. В коде сделано еще одно изменение, вместо if(eaten gt; 5) используется if(eaten gt; apples). Если в последующем количество имеющихся яблок var apples = 5; изменится, то это изменение пришлось бы делать только в одном месте. Старайтесь всегда использовать в коде переменные. Если значения "жестко закодированы", как было сделано ранее в коде if(eaten gt; 5), то очень часто при внесении изменений придется подолгу искать эти жестко закодированные значения, чтобы убедиться, что внесены все необходимые изменения.

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

В этом случае лучшим решением будет использование так называемой функции. Функция содержит код, который выполняет определенную задачу. Мы уже видели использование функций alert, prompt, parseInt и isNaN, которые встроены в язык JavaScript. Преимущество использования функций состоит в том, что можно выполнять один и тот же блок кода снова и снова, не копируя этот код, Для выполнения функции необходимо написать ее имя, за которым следуют скобки (), а все значения, передаваемые в функцию, записываются между скобками.

var apples = 5; function eatApples(){ alert('Имеется ' + apples + ' яблок!'); var eat = prompt('Сколько яблок вы хотите съесть?', '1'); var eaten = parseInt(eat); if(isNaN(eaten)){ alert('Вы должны ввести допустимое число яблок!'); eatApples(); } else if(eaten gt; apples){ alert('Простите, но имеется только ' + apples + ' яблок. Вы не можете съесть ' + eaten + ' яблок!'); eatApples(); } else if(eaten lt; 0){ alert('Простите, но вы не можете съесть отрицательное количество яблок!'); eatApples(); } else { apples -= eaten; alert('А теперь имеется только ' + apples + ' яблок!'); if(apples gt; 0){ if(confirm('Не хотите съесть еще яблочко?')){ eatApples(); } } else { alert('Яблок больше нет!'); } } }

Здесь весь наш код записан в виде функции с именем eatApples. Можно видеть, что каждый раз, когда пользователь вводит неверное значение, снова вызывается функция eatApples();, чтобы пользователь мог ввести новое значение. Когда пользователь вводит допустимое значение, то он либо может еще есть яблоки, либо, если все яблоки закончились, он получит соответствующее сообщение. Здесь используется также одна новая функция, confirm. Функция confirm просто выводит пользователю приглашение OK or Cancel ("Да или Отмена"). Если пользователь нажмет кнопку "OK", то функция возвращает значение true (да). Если пользователь нажмет кнопку Cancel или просто закроет окно, то функция confirm возвращает значение false (нет). Поэтому в нашем примере функция eatApples вызывается снова только в том случае, когда пользователь щелкнет на кнопке OK.

В конце этой лекции будет рассмотрена область действия переменной. Как можно видеть, в последнем примере переменная apples находится вне функции eatApples. Это делает переменную apples "глобальной переменной", т.е. она будет доступна из любой функции. Переменная eat, с другой стороны, является локальной переменной и существует только внутри функции eatApples. Кроме того, каждый раз при вызове функции eatApples переменная eat не будет существовать, пока не будет снова определена функцией prompt.

Чтобы увидеть эту концепцию в действии, напишем две простые функции счета:

function counting1(){ var count = 0; count++; alert(count); } var count = 0; function counting2(){ count++; alert(count); }

Если запустить этот пример в браузере и щелкнуть на каждой кнопке несколько раз, то можно заметить, что counting1 всегда выдает одно и то же значение, 1. counting2, с другой стороны, выдает увеличивающееся число. Почему это происходит? Посмотрим просто сначала на counting1. Можно видеть, что каждый раз при выполнении counting1 прежде всего создается переменная count и ее значение задается равным 0. В следующей строке переменная count увеличивается на 1.

Оператор ++ пока еще не встречался. count++ просто увеличивает count на 1. Другими словами, это в точности то же самое, что написать count += 1 или count = count + 1. Поскольку увеличение на 1 является в программировании очень распространенным действием, то для него существует специальный оператор. Аналогично оператор -- вычитает 1 из переменной: count--.

Каждый раз, когда функция counting1 выполняет alert(count), она сообщает значение новой переменной count , которое только что было определено как 0+1.

Теперь посмотрим на counting2. Можно видеть, что переменная count в этом случае находится вне функции. Даже до вызова этой функции значение count задано как 0. При вызове counting2 прежде всего происходит увеличение переменной count на 1. Так как мы не восстанавливаем значение count в 0, как в случае counting1, то переменная count продолжает сохранять свое значение, и все происходит, как и предполагалось.

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