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

    Наш программный код начнется с определения обработчиков событий $(document).ready() и $('#switcher-large').click():

$(document).ready(function() {
  $('#switcher button').click(function() {
  });
});

    Далее размер шрифта легко можно определить с помощью метода .css(): $('div.speech').css('fontSize'). Однако возвращаемое значение содержит в конце символы 'рх', поэтому, прежде чем использовать полученное значение в вычислениях, нам необходимо удалить эти символы. Кроме того, если объект jQuery планируется использовать многократно, предпочтительнее будет кэшировать селектор, сохранив полученный объект jQuery в переменной.

$(document).ready(function() {
  var $speech = $('div.speech');
  $('#switcher button').click(function() {
    var num = parseFloat( $speech.css('fontSize'), 10 );
  });
});

    Теперь первая строка внутри $(document).ready() сохраняет объект jQuery с элементом <div class="speech"> в переменной. Обратите внимание на символ $ в имени переменной $speech. Так как JavaScript допускает использование символа $ в именах переменных, мы можем применять его в качестве напоминания, что переменная хранит объект jQuery.

    Внутри обработчика .click() мы используем функцию parseFloat(), чтобы получить значение свойства fontSize в виде числа. Функция parseFloat() просматривает строку слева направо, пока не встретит первый нецифровой символ. Затем строка цифр преобразуется в вещественное (десятичное) число. Например, эта функция преобразует строку '12' в число 12. Кроме того, она удаляет все нецифровые символы в конце строки, благодаря чему строка '12рх' превращается в число 12. Если строка начинается с нецифрового символа, функция parseFloat() возвращает значение NaN (Not a Number - не число). Второй аргумент функции parseFloat() позволяет указать, что строка должна интерпретироваться не как восьмеричное или какое-либо другое число, а как десятичное.

    Все, что осталось теперь сделать для увеличения размера шрифта на 40%, - это просто умножить число num на 1.4 и затем установить новый размер шрифта, присоединив к числу num символы 'рх':

$(document).ready(function() {
  var $speech = $('div.speech');
  $('#switcher button').click(function() {
    var num = parseFloat( $speech.css('fontSize'), 10 );
    num *= 1.4;      
    $speech.css('fontSize', num + 'px');
  });
});

    Теперь, когда пользователь щелкнет на кнопке Увеличить, размер шрифта текста увеличится. Следующий щелчок на этой кнопке увеличит размер шрифта еще больше.

    Чтобы в результате щелчка на кнопке Уменьшить размер шрифта уменьшался, мы будем уже не умножать, а делить текущее значение размера: num /= 1.4. По-прежнему лучше всего объединить обработчики .click() всех элементов <button>, находящихся внутри <div id="switcher">. Тогда после получения числового значения можно будет выполнить операцию умножения или деления в зависимости от значения атрибута ID кнопки, на которой был выполнен щелчок. Ниже показано, как теперь выглядит наш программный код:

$(document).ready(function() {
  var $speech = $('div.speech');
  $('#switcher button').click(function() {
    var num = parseFloat( $speech.css('fontSize'), 10 );
    if (this.id == 'switcher-large') {
       num *= 1.4;
     } else if (this.id == 'switcher-small') {
       num /= 1.4;
    }
    $speech.css('fontSize', num + 'px');
  });
});

    Ранее говорилось, что доступ к свойству id элемента DOM можно получить с помощью ключевого слова this, которое присутствует в инструкциях if и else if. В данном случае этот способ является более эффективным, чем создание объекта jQuery для простой проверки значения свойства.

    Кроме всего прочего, не лишним было бы иметь возможность возвращать размер шрифта в его первоначальное значение. Чтобы дать пользователю такую возможность, мы можем просто сохранить размер шрифта в переменной сразу же, как только дерево DOM будет готово к работе с ним. После этого мы сможем задействовать это значение в обработчике щелчка на кнопке Обычный. Чтобы обработать данное событие, мы могли бы добавить еще одну инструкцию else if. Однако инструкция switch лучше подходит для таких случаев.

$(document).ready(function() {
  var $speech = $('div.speech');
  var defaultSize = $speech.css('fontSize');
  $('#switcher button').click(function() {
    var num = parseFloat( $speech.css('fontSize'), 10 );
    switch (this.id) {
      case 'switcher-large':
        num *= 1.4;      
        break;
      case 'switcher-small':
        num /= 1.4;
        break;
      default:
        num = parseFloat(defaultSize, 10);        
    }
    $speech.css('fontSize', num + 'px');
  });
});

    Здесь мы точно так же проверяем значение this.id и в соответствии с ним изменяем размер шрифта, но если это значение не равно ни 'switcher-large', ни 'switcher-small', то устанавливается размер шрифта по умолчанию.

    На следующем шаге мы рассмотрим простые эффекты скрытия и отображения.

Предыдущий шаг Содержание Следующий шаг