Основы JavaScript

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

Показывать лекцию целиком

Введение

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

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

Лекция имеет следующую структуру:

  • Порядок, у меня будет порядок!
  • Переменные
  • Типы переменных
  • Числа с плавающей точкой и целые числа
  • Логические значения
  • Строки
  • Массивы
  • Объекты
  • Условия
  • Циклы
  • Заключение
  • Контрольные вопросы
  • Порядок, у меня будет порядок!

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

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

    var fahrenheit = prompt('Enter temperature in Fahrenheit',0);
    var celsius = (fahrenheit - 32) * 5 / 9;
    alert(celsius);
    
    $fahrenheit = $_GET['fahrenheit'];
    $celsius = ($fahrenheit - 32) * 5 / 9;
    echo $celsius;

    Посмотрите пример на JavaScript преобразования температуры из шкалы Фаренгейта в шкалу Цельсия.

    <!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>JavaScript Fahrenheit conversion demo</title>
      <script type="text/javascript">
        var fahrenheit = prompt('Enter temperature in Fahrenheit',0);
        var celsius = (fahrenheit - 32) * 5 / 9;
        alert(celsius);    
        // honestly, go metric!
      </script>
    </head>
    <body>
    </body>
    </html>

    Языки программирования интерпретируются, чтобы превратиться в действия или результаты. Некоторые языки, такие как JavaScript, интерпретируются браузером Web, и, чтобы заставить их "выполнить работу", достаточно поместить код в документ HTML и открыть его в браузере. Другие языки программирования, чтобы сделать их исполнимыми, необходимо перевести (компилировать) с помощью дополнительного шага. Глубоко внутри себя все компьютеры понимают только нули и единицы, но над этим существует множество уровней языков, каждый из которых выполняет различные задачи.

    Переменные

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

    3 + 5 = 8

    Можно сказать, что вычисления начинают выполняться, когда вводится неизвестное, например, x внизу:

    3 + x = 8

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

    x = 8 - 3 
    -> x = 5

    При использовании нескольких переменных выражение становится более гибким:

    x + y = 8

    Можно изменять значения x и y, и формула может по-прежнему оставаться справедливой:

    x = 4
    y = 4

    или

    x = 3
    y = 5

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

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

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

    Примечание: Теги <script> присутствуют здесь, чтобы сообщить браузеру, что текст между ними является языком сценария, и что он должен интерпретироваться соответствующим образом. Атрибут типа "text/javascript" сообщает браузеру, какой это язык.

    <script type="text/javascript">
    var x = 5;
    var y = 6;
    var result = x + y;
    </script>

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

    На обычном языке эта последовательность будет означать следующее:

  • Здесь находится что-то, что не является кодом HTML; вызвать транслятор, который понимает язык типа JavaScript в текстовом формате.
  • Определить новую переменную (это ключевое слово var ) с именем x и присвоить ей значение 5. Конец инструкции.
  • Определить новую переменную с именем y и присвоить ей значение 6. Конец инструкции.
  • Определить новую переменную с именем result и присвоить ей в качестве значения результат сложения x и y. Конец инструкции. (Так как в присваивании значения переменной имеется вычисление, то интерпретатор затем проверяет значение x, проверяет значение y, складывает два значения и задает значение результата окончательному значению - 11)
  • Достаточно этого странного языка - возвращаемся к HTML и приказываем транслятору скрыться.
  • С переменными можно выполнять всевозможные вычисления, вставляя между ними различные операторы. Существуют классические операции, такие как сложение с помощью оператора плюс и вычитание с помощью оператора минус. Для умножения необходимо использовать звездочку ( * ), а для деления косую черту ( / ). Следующий пример показывает некоторые возможные вычисления. Отметим, что текст, перед которым стоят две косые черты //, служит в JavaScript в качестве комментариев. Когда интерпретатор JavaScript встречает их в сценарии, то он не пытается выполнить то, что следует после них в этой строке, а пропускает до конца строки - эти комментарии вставляются для людей, и не должны интерпретироваться браузером.

    <script type="text/javascript">
    var x = 5;
    var y = 6;
    var z = 20;
    var multiply = x * y * z;
    // multiply will be 600 
    var divide = x / y;
    // divide будет  0.8333333333333334
    var addAndDivide = (x + z) / y;
    // addAndDivide = 4.166666666666667
    var half = (y + z) / 2;
    // half будет  13
    </script>

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

    Типы переменных

    Однако все это было бы достаточно нудно, так как это можно сделать с помощью обычного калькулятора. Компьютеры являются значительно более развитыми устройствами и могут использовать значительно более сложные переменные. Именно здесь и появляются типы переменных. Существуют различные типы переменных и разные языки программирования поддерживают различные типы. Наиболее широко распространенными типами переменных являются:

  • Float (число с плавающей точкой): числа, такие как 1.21323, 4, 100004 или 0.123
  • Integer (целое число): целые числа, такие как 1, 12, 33, 140, но не 1.233
  • String (строка): строка текста, такая как "boat", "elephant" или "damn, you are tall!"
  • Boolean (булево значение): true или false, но ничего другого
  • Array ( массив ): совокупность значений, такая как 1,2,3,4,'I am bored now'
  • Objects: представление какого-то объекта. Объекты являются конструкциями, которые пытаются моделировать экземпляры объектов в реальном мире с помощью свойств и методов. Например, можно смоделировать кота (cat) как объект и определить, что он имеет четыре ноги, один хвост, и что он рыжий. Можно также определить, что он может мурлыкать, определяя метод purr(), и что он может выпрашивать чизбургер с помощью метода getCheeseBurger(). Можно также повторно использовать объект кота cat и определить другого кота со всеми свойствами исходного, но только серого цвета.
  • JavaScript является "слабо типизированным" языком, то есть в нем не требуется явно объявлять, какой тип данных содержат переменные. Необходимо использовать только ключевое слов var для указания, что объявляется переменная, а браузер будет определять, какой тип данных используется из контекста и использования кавычек.

    Числа с плавающей точкой и целые числа

    Нет ничего магического или необычного при работе с этими типами данных. Вы определяете переменные и задаете для них значения любого числового типа.

    <script type="text/javascript">
      var fahrenheit = 123;
      var celsius = (fahrenheit - 32) * 5/9; 
      var clue = 0.123123;
    </script>

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

    Булевы значения

    Булевы значения являются просто определениями "да или нет". Они задаются с помощью ключевых слов true или false.

    <script type="text/javascript">
      var doorClosed = true;
      var catCanLeave = false;
    </script>

    Строки

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

    <script type="text/javascript">
      var surname = 'Heilmann';
      var name = "Christian";
      var age = '33';
      var hair = 'Flickr famous';
    </script>

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

    <script type="text/javascript">
      var surname = 'Heilmann';
      var name = 'Christian';
      var age = '33';
      var hair = 'Flickr famous';
      var message = 'Hi, I am ' + name + ' ' + surname + '. ';
      message += 'I am ' + age + ' years old and my hair is ' + hair;
      alert(message);
     </script>

    Посмотрите пример конкатенации строк.

    <!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>String concatenation demo</title>
      <script type="text/javascript">
        var surname = 'Heilmann';
        var name = 'Christian';
        var age = '33';
        var hair = 'Flickr famous';
        var message = 'Hi, I am ' + name + ' ' + surname + '. ';
        message += 'I am ' + age + 'years old and my hair is ' + hair;
        alert(message);
      </script>
    </head>
    <body>
    </body>
    </html>

    Оператор += является сокращенной записью для "message = message +". Результатом этого сценария будет строка "Hi I am Christian Heilmann. I am 33 years old and my hair is Flickr famous".

    Существует небольшая ловушка, о которой надо помнить при использовании конкатенации, чтобы не перепутать со сложением значений. Если требуется сложить два значения, необходимо убедиться, что оба являются числами, а не строками. Пример сравнения конкатенации и сложения показывает различие между ними. "5"+"3" будет 53, а не 8! Простейшим способом преобразования строки в число, как показано в примере, будет использование знака "+" перед строкой.

    <!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>Concatenation versus adding</title>
      <script type="text/javascript">
        var x = 5;
        var y = "3";
        alert(x+y);
        y = +y;
        alert(x+y);
      </script>
    </head>
    <body>
    </body>
    </html>

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

    <script type="text/javascript">
      // это будет вызывать ошибку, так как интерпретатор не знает 
      // что находится после символа '. Здесь определена строка 
      // 'Isn'.
      var stringWithError = 'Isn't it hard to get things right?';
      // Это не ошибка, все хорошо  
      var stringWithoutError = 'Isn\'t it hard to get things right?';
    </script>

    Массивы

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

    <script type="text/javascript">
      var pets = new Array('Boomer','Polly','Mr.Frisky');
    </script>

    Доступ к каждому значению можно получить с помощью счетчика массива, который является порядковым номером в массиве - представьте, что просматриваете главы в книге. Синтаксис выражения будет arrayname[index]. Поэтому, например, pets[1] выдаст строку "Polly". "Но подождите!" - слышу я вопрос - "разве не pets[2] будет указывать на Polly, при условии, что это второе значение в массиве?" - Нет. Счетчик не будет равен 2, так как компьютеры начинают считать с 0, а не с 1! Это очень распространенная причина путаницы и ошибок.

    Массивы автоматически содержат специальную информацию: length (длина). Если проверить значение pets.length, то будет получено 3, так как в этом массиве содержится три элемента.

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

    Объекты

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

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

    <script type="text/javascript">
      var person = new Object();
      person.name = 'Chris';
      person.surname = 'Heilmann';
      person.age = 33;
      person.hair = 'Flickr famous';
    </script>

    Доступ к этим свойствам можно получить с помощью записи с точкой ( person.age выдаст 33) или с помощью записи с квадратными скобками ( person['name'] выдаст "Chris"). Позже в этом курсе объекты JavaScript будут рассмотрены более подробно.

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

    Условия

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

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

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

    Самым простым условием является оператор 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/)

    Вернуться к учебному плану