Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет
Лекция 9:

Сценарии Javascript

Управляющие структуры

Ветвящиеся структуры, if, if…else и switch, позволяют направить выполнение программы в соответствии с проверяемым условием.

if (b != 0)
      c = a / b; //выполнить деление только если делитель не ноль

    if (x % 2 == 0)
      document.write(x + ' четное');
    else
      document.write(x + ' нечетное');

    var d = new Date(); // объект Date – текущая дата и время
    switch (d.getDay()) {
      case 0:
        document.write("Воскресенье");
        break; //выход из переключателя. 
      //Если опущен, будет выполнена и следующая инструкция  
      case 1:
        document.write("Понедельник");
        break;
      case 2:
        document.write("Вторник");
        break;
      case 3:
        document.write("Среда");
        break;
      case 4:
        document.write("Четверг");
        break;
      case 5:
        document.write("Пятница");
        break;
      case 6:
        document.write("Суббота");
        break;
      default: // выполняется, если не выполнено 
        //ни одно из предыдущих условий
        document.write(d.getDay());
    }

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

Цикл for управляется счетчиком.

var a = []; // объявляем массив
    for (var i = 0; i < 10; i++)
      a[i] = i; // заполняем 10 элементов массива
    var sum = 0;
    for (var j = 0, N = a.length; j < N; j++)
      sum += a[j];
    document.write('Сумма = ' + sum);

Специальная форма for, for/in, удобна для перебора свойств объекта.

var nav = window.navigator; // информация о браузере
    for (prop in nav)
      document.write(prop + ': ' + nav[prop] + '<br>\n');
    // печатает построчно пары свойство: значение объекта.

В цикле while условие проверяется перед началом каждого повтора. Если условие изначально ложно, цикл не будет выполнен.

var x = 0;
    while (x != 4) {//цикл повторяется, пока условие истинно
      x = window.prompt('Сколько будет 2 * 2', x);
      //метод window.prompt открывает диалоговое окно с полем ввода,
      //куда нужно ввести ответ. 
    }
    if (x == 4)
      window.alert("Правильно");

В цикле do…while условие проверяется в конце цикла, то есть цикл повторяется как минимум один раз.

var x = 0;
    do {
      x = window.prompt('Сколько будет 2 * 2', x);
    } while (x != 4); //цикл повторяется, пока условие истинно
    if (x == 4)
      window.alert("Правильно");

В некоторых случаях требуется выход из цикла или переход к началу цикла до завершения всего блока инструкций. Оператор break заканчивает выполнение цикла и передает управление первой инструкции после цикла. Оператор continue пропускает инструкции до конца блока и начинает новый повтор цикла.

var x = 0;
    while (x != 4) {
      x = window.prompt("Сколько будет 2*2?", x);

      if (x == null)//пользователь нажал "Отмена"
        break; // выход из цикла

      if (Number(x) == x)// является ли x числом
        continue; // пропускаем остаток и начинаем новый повтор
      // с проверкой условия

      //сюда попадаем, только если введено не число
      window.alert("Вводите только числа");
    } // конец цикла

    if (x == null)
      window.alert("Вы сдались");
    else
      window.alert("Вы угадали");
Встроенные объекты Javascript

Javascript поддерживает ряд собственных объектов, среди которых обратим внимание на следующие:

Объект Object содержится во всех остальных объектах и обеспечивает их общую функциональность. Уже упомянутые числа, строки и массивы являются объектами Number, String и Array, соответственно, и каждый из этих объектов имеет свой набор свойств и методов. Объект Math открывает доступ к алгебраическим и тригонометрическим функциям. Объект Date предназначен для операций с датой и временем; при работе в браузере доступны лишь функции чтения данных, такие как getDate, getDay, но не setDate или setTime. Объект Global создается при запуске движка Javascript, его свойства, такие как Infinity (бесконечность), NaN (ошибка Not a Number) и undefined (неопределенная переменная), и методы доступны автоматически.

var a = '3'; //строка
    var b = 4; //число
    var c = a + b; //34 – строковое слияние
    var d = parseFloat(a) + b; //7
    //функция parseFloat – читать как число с плавающей запятой – 
    //гарантирует, что строка, содержащая число, будет интерпретирована
    //как число

    var str = 'var x = 2 + 3;';
    eval(str);
    document.write(x); //5
    //функция eval выполняет код, заданный в виде строки, 
    //которая может генерироваться динамически

Особое место занимает объект Function (функция). Функции в Javascript являются объектами первого класса, то есть могут присваиваться переменным, выступать аргументами других функций и быть результатом (возвращаемым) функций. В Javascript есть несколько вариантов синтаксиса создания функций.

//классический синтаксис
    function a1(x, y) {
      return x + y;
    }

    //явное создание объекта Function
    var a2 = new Function('x', 'y', 'return x + y');
    //обязательным является только последний аргумент – тело функции

    //еще один вариант
    var a3 = function(x, y) { return x + y; };

Независимо от способа задания функции ее вызов осуществляется одинаково и с одинаковым результатом.

a = a1(3, 4);
    b = a2(3, 4);
    c = a3(3, 4);

Функция как объект имеет собственные свойства

function ArgTest(a, b) {
    var i, s = "Функция ArgTest ожидает ";
    //число аргументов при объявлении функции
    var expargs = ArgTest.length;

    //число аргументов при вызове функции
    var numargs = ArgTest.arguments.length;
    if (expargs < 2)
      s += expargs + " аргумент. ";
    else
      s += expargs + " аргумента. ";
    if (numargs == 1)
      s += " Получен 1 аргумент.";
    else
      s += "Получено " + numargs + " аргументов.";
    return (s);
  }

Массив arguments содержит аргументы, отправленные в функцию при вызове, даже если они не были перечислены при объявлении функции.

function sum() {
      var s = 0;
      for (var i = 0, n = arguments.length; i < n; i++)
        s += arguments[i];
      return s;
    }
    document.write(sum(1, 2, 3, 4)); //10

Как было сказано, функции могут быть аргументами других функций. Например, метод sort объекта Array производит сортировку массива и может принимать в качестве аргумента функцию сравнения элементов массива.

//создаем и заполняем массив 10 элементами
  var arr = [];
  for (var i = 0; i < 10; i++)
    arr[i] = i;

  //сортируем массив по убыванию
  arr.sort(function(x, y) { return x < y ? 1 : -1; });
  //функция сравнения принимает два аргумента и возвращает -1, 
  //если первый элемент должен идти впереди второго, 
  //и 1 в противном случае

  //перетасовываем массив, т.е. сортируем в произвольном порядке
  arr.sort(function() { return Math.random() < 0.5 ? 1 : -1; });
  //от аргументов функции сравнения ничего не зависит, 
  //поэтому они могут быть опущены. 1 и -1 возвращаются 
  //в случайном порядке

Функции могут вызываться из функций, в том числе из самих себя (рекурсия). Классический пример рекурсии – расчет факториала.

function Factorial(N) {
      return N < 2 ? 1 : N * Factorial(N - 1);
    }
Юрий Шах
Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Вячеслав Моржевский
Вячеслав Моржевский
Россия, Москва