НОУ ИНТУИТ | Основы JavaScript. Лекция 1: Программирование

Опубликован: 01.07.2011 | Уровень: для всех | Доступ: платный

Условия

Условие является проверкой чего-то. Условия очень важны для программирования по нескольким причинам:

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

Затем, условия позволяют создавать ветвления. Схемы ветвления могут встречаться достаточно часто, например, при заполнении форм. По сути, это относится к выполнению различных "ветвей" (частей) кода в зависимости от того, удовлетворяется условие или нет.

Самым простым условием является оператор if, который имеет синтаксис if(условие){ выполни это … }. Условие должно быть истинным, чтобы код в фигурных скобках выполнился. Можно, например, проверять строку, и задавать значение другой строки в зависимости от ее значения:

<script type="text/javascript">
var country = 'France';
var weather;
var food;
var currency;
if(country === 'England'){
  weather = 'horrible';
  food = 'filling';
  currency = 'pound sterling';
}
if(country === 'France'){
  weather = 'nice';
  food = 'stunning, but hardly ever vegetarian';
  currency = 'funny, small and colourful';
}
if(country === 'Germany'){
  weather = 'average';
  food = 'wurst thing ever';
  currency = 'funny, small and colourful';
}
var message = 'this is ' + country + ', the weather is ' + 
              weather + ', the food is ' + food + ' and the ' +
              'currency is ' + currency;
alert(message);
</script>

Попробуйте это самостоятельно в примере с оператором if. Изменяйте значение переменной country (страна - France, England, Germany), чтобы увидеть различные сообщения.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Weather condition demo</title>
  <script type="text/javascript">
    var country = 'France';
    var weather;
    var food;
    var currency;
    if(country === 'England'){
      weather = 'horrible';
      food = 'filling';
      currency = 'pound sterling';
    }
    if(country === 'France'){
      weather = 'nice';
      food = 'stunning, but hardly ever vegetarian';
      currency = 'funny, small and colourful';
    }
    if(country === 'Germany'){
      weather = 'average';
      food = 'wurst thing ever';
      currency = 'funny, small and colourful';
    }
    var message = 'this is ' + country + ', the weather is ' + 
                  weather + ', the food is ' + food + ' and the ' +
                  'currency is ' + currency;
    alert(message);
  </script>
</head>
<body>
</body>
</html>

Часть условия состоит из country, после чего следует три знака равенства. Три знака равенства означают, что условие проверяет, что переменная country имеет указанное значение, но также правильный тип ( данных ) переменной. Проверку можно выполнять также с помощью двойного знака равенства, но это будет означать, что if(x == 5) будет истинным для x равного 5 и x равного "5". В зависимости от того, что делает программа, это может иметь совершенно разные результаты.

Другие примеры проверки условия:

x > 0 - x больше нуля?
x < 0 - x меньше нуля?
x <= 4 - x меньше или равно четырем?
x != 'hello' - x не совпадает с 'hello'?
x - существует ли x?

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

<script type="text/javascript">
var country = 'Germany';
var weather;
var food;
var currency;
if(country){
  if(country === 'England'){
    weather = 'horrible';
    food = 'filling';
    currency = 'pound sterling';
  }
  if(country === 'France'){
    weather = 'nice';
    food = 'stunning, but hardly ever vegetarian';
    currency = 'funny, small and colourful';
  }
  if(country === 'Germany'){
    weather = 'average';
    food = 'wurst thing ever';
    currency = 'funny, small and colourful';
  }
  var message = 'this is ' + country + ', the weather is ' + 
                weather + ', the food is ' + food + ' and the ' +
                'currency is ' + currency;
  alert(message);
}
</script>

Попробуйте это самостоятельно в примере Safe-weather с оператором if. Измените значение переменной country, чтобы увидеть различные сообщения.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Weather condition demo</title>
  <script type="text/javascript">
    var country = 'Germany';
    var weather;
    var food;
    var currency;
    if(country){
      if(country === 'England'){
        weather = 'horrible';
        food = 'filling';
        currency = 'pound sterling';
      }
      if(country === 'France'){
        weather = 'nice';
        food = 'stunning, but hardly ever vegetarian';
        currency = 'funny, small and colourful';
      }
      if(country === 'Germany'){
        weather = 'average';
        food = 'wurst thing ever';
        currency = 'funny, small and colourful';
      }
      var message = 'this is ' + country + ', the weather is ' + 
                    weather + ', the food is ' + food + ' and the ' +
                    'currency is ' + currency;
      alert(message);
    }
  </script>
</head>
<body>
</body>
</html>

В то время как предыдущий пример будет всегда пытаться создать сообщение, независимо от доступной country - и поэтому возможно порождение ошибки или утверждения "this is undefined, the weather…", данная версия более защищена. Если country не определено, сообщение никогда не будет создаваться.

Более того, можно соединять различные условия с помощью операторов "и" или "или", чтобы проверить, что хотя бы одно из утверждений справедливо, или справедливы оба, соответственно. В JavaScript "или" записывается как ||, а "и" записывается как &&. Пусть необходимо проверить, что значение x находится между 10 и 20 - можно сделать это с помощью следующего условия if(x > 10 && x < 20). Если требуется убедиться, что country будет "England" или "Germany", можно воспользоваться условием if(country === 'England' || country === 'Germany').

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

<script type="text/javascript">
  var umbrellaMandatory;
  if(country === 'England'){
    umbrellaMandatory = true;
  } else {
    umbrellaMandatory = false;
  }
</script>

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

<script type="text/javascript">
  var names = new Array('Chris','Dion','Ben','Brendan');
  var all = names.length;
  if(all == 1){
    names[0] = '<p>' + names[0] + '</p>';
  }
  if(all == 2){
    names[0] = '<p>' + names[0] + '</p>';
    names[1] = '<p>' + names[1] + '</p>';
  }
  if(all == 3){
    names[0] = '<p>' + names[0] + '</p>';
    names[1] = '<p>' + names[1] + '</p>';
    names[2] = '<p>' + names[2] + '</p>';
  }
  if(all == 4){
    names[0] = '<p>' + names[0] + '</p>';
    names[1] = '<p>' + names[1] + '</p>';
    names[2] = '<p>' + names[2] + '</p>';
    names[3] = '<p>' + names[3] + '</p>';
  }
</script>

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

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

Циклы

Циклы являются повторяющимися условиями, когда в цикле изменяется одна переменная. Простейшей формой цикла является оператор for. Он имеет синтаксис, который похож на оператор if, но с дополнительными возможностями:

for(инициализация; конечное условия; изменение){
  // сделай это, сделай это сейчас
}

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

<script type="text/javascript" charset="utf-8">
  for(var i = 0;i < 11;i = i + 1){
    // сделай это, сделай это сейчас
  }
</script>

Здесь определена переменная i с начальным значением 0, а затем выполняется проверка, не достигла ли она значения 11 (меньше 11?). Уравнение изменения - i = i + 1 - увеличивает i на единицу при каждом выполнении цикла и переходе к следующей итерации. Этот цикл выполнится поэтому 11 раз. Если увеличивать i во время каждой итерации на два, то цикл выполнится только 6 раз:

<script type="text/javascript">
  for(var i = 0;i < 11;i = i + 2){
    // сделай это, сделай это сейчас
  }
</script>

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

<script type="text/javascript">
  var names = new Array('Chris','Dion','Ben','Brendan');
  var all = names.length;
  for(var i=0;i<all;i=i+1){
    names[i] = '<p>' + names[i] + '</p>';
  }
</script>

Отметим, что внутри цикла можно использовать значение i в качестве счетчика массива. В этом состоит сила циклов - можно не только выполнять одну и ту же работу снова и снова; но на каждой итерации также известно, сколько раз цикл был выполнен.

Заключение

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

Контрольные вопросы

Почему этот код не работает? var x = hello world;

Это допустимый код? var x = 'elephant';var y = "mouse";

Что проверяет это условие? if(x > 10 && x < 20 && x !== 13 && y < 10)

Что делает это условие? if(b < 10 && b > 20)?

Выполните цикл на массиве с элементами "peter","paul","mary","paddington bear","mr.ben","zippy" и "bagpuss". Добавьте вокруг каждого из них параграф, и добавьте параграф с классом "odd" для каждого второго. Совет: можно проверять каждый второй элемент, используя операцию сравнения по модулю i % 2 == 0

Об авторе

Крис Хайлман работает Web-разработчиком уже десять лет, с тех пор как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода внешнего представления для Европы и Азии.

Крис поддерживает блог на сайте Wait till I come (http://wait-till-i.com/) и доступен во многих социальных сетях под ником "codepo8".

Фото с разрешения: Bluesmoon (http://www.flickr.com/photos/bluesmoon/1545636474/)

Дальше >>

Основы JavaScript

Основы JavaScript

Программирование - основные понятия!

Условия

Циклы

Заключение

Контрольные вопросы

Об авторе

Вопросы и ответы

Студенты

Авторизоваться

Основы JavaScript

Основы JavaScript

Программирование - основные понятия!

Условия

Циклы

Заключение

Контрольные вопросы

Об авторе

Вопросы и ответы

Студенты