Управление таблицей с помощью javascript.


Урок 6 - Операторы цикла: for
  • арифметическая прогрессия (сумма);
  • арифметическая прогрессия (числа по порядку);
  • таблица умножения

Хотя JavaScript не универсален и не всемогущ, не велик и не ужасен, это всё же язык программирования, и он позволяет выполнять сложные математические вычисления. Иногда возникают ситуации, когда требуется многократно выполнить программный код, пока не выполнится определённое условие. Допустим, сдать карты в пасьянсе (очень хитроумная задача). Или сложить подряд числа от 1 до 15 (простейший вариант). Для этих целей существуют операторы, которые позволяют выполнять циклы - повторяющиеся действия.

Оператор for

Его синтаксис напоминает оператор if : условие в круглых скобках, код - в фигурных. Но условие более сложное:

for (начало; область действия; шаг) {код}

Начало: здесь задаётся начальное условие, при котором оператор включается.

Область действия: границы, в которых выполняется код.

Шаг: способ продвижения цикла от начального к конечному условию.

Арифметическая прогрессия

Предположим, нам надо узнать и записать на странице сумму всех чисел подряд от 1 до 10.

Разберём:

Объявляем переменную счётчика i и переменную, собирающую знчения - x . Назначим ей нулевое значение. Все значения должны куда-то складываться, а неназначенная переменная - это Null («посмотришь на его место, и нет его»).

Начальное значение счётчика - 1. Граница - до 10 включительно, то есть меньше или равно 10. Шаг - 1 (каждое следующее целое число).

Привыкайте к специальным обозначениям. Если не помните, что такое ++ или +=, зайдите в прошлый урок и посмотрите табличку.

В коде x += i каждое новое значение счётчика приплюсовывается к переменной x .

Затем выходим из цикла и публикуем на странице итоговое значение.

А теперь чуть поинтереснее.

Вытащим на страницу все промежуточные значения счётчика. Для этого поместим document.write не выходя из цикла (то есть внутри фигурных скобок). А чтобы числа не печатались сплошной нераздельной строкой, добавим в него разделитель:

var i, x = 0; for (i = 1; i Результат:

1; 3; 6; 10; 15; 21; 28; 36; 45; 55;

А как сделать, чтобы вся строка заканчивалась, скажем, точкойх

Для этого скомбинируем этот оператор с уже известным нам оператором if...else . То есть при последнем значении i (10) у нас должна выпасть точка, при остальных - точка с запятой и пробел:

var i, x = 0; for (i = 1; i Результат:

1; 3; 6; 10; 15; 21; 28; 36; 45; 55.

Примечание: Кстати, вот оно, реальное различие методов write и writeln . Вместо пробела здесь можно применить метод writeln . Если мы запишем

Кстати, вот оно, реальное различие методов write и writeln. Вместо пробела здесь можно применить метод writeln. Если мы запишем........ ........ if (i == 10) {document.write(x + ".")} else {document.writeln(x + ";")} ........

то пробел делать не обязательно, его поставит сам метод.

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

Таблица умножения

А сейчас, допустим, нам захотелось вывести таблицу умножения - вот такую:

2х2=4 3х2=6 4х2=8 5х2=10 6х2=12 7х2=14 8х2=16 9х2=18
2х3=6 3х3=9 4х3=12 5х3=15 6х3=18 7х3=21 8х3=24 9х3=27
2х4=8 3х4=12 4х4=16 5х4=20 6х4=24 7х4=28 8х4=32 9х4=36
2х5=10 3х5=15 4х5=20 5х5=25 6х5=30 7х5=35 8х5=40 9х5=45
2х6=12 3х6=18 4х6=24 5х6=30 6х6=36 7х6=42 8х6=48 9х6=54
2х7=14 3х7=21 4х7=28 5х7=35 6х7=42 7х7=49 8х7=56 9х7=63
2х8=16 3х8=24 4х8=32 5х8=40 6х8=48 7х8=56 8х8=64 9х8=72
2х9=18 3х9=27 4х9=36 5х9=45 6х9=54 7х9=63 8х9=72 9х9=81
2х10=20 3х10=30 4х10=40 5х10=50 6х10=60 7х10=70 8х10=80 9х10=90

Да чтобы руками эту таблицу не форматировать и опечаток не наделать.

Давайте найдём алгоритм для составления такой таблицы.

Как мы помним из HTML , таблицы надстраиваются горизонтальными рядами , которые, в свою очередь, делятся на ячейки .

Рассмотрим содержимое первого горизонтального ряда.

Первый множитель увеличивается на единицу. Второй остаётся без изменений.

А в вертикальных столбцах - наоборот. Первый стоит на месте, а второй приращивается.

Рядов в нашей таблице девять (от 2 до 10), а колонок в каждом из них по 8 (от 2 до 9).

Попробуем сначала сформировать все через счётчик i .

var i; for (i = 2; i "); document.write("")}

Почему от 2 до 10, а не от 1 до 9?

Догадайтесь с трёх раз...

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

Наш первый должен выглядеть вот так (× - это спецсимвол HTML для отображения «школьного» знака умножения):

2×2=4 3×2=6 4×2=8 5×2=10 6×2=12 7×2=14 8×2=16 9×2=18

То есть внутри него ещё один цикл - из .

Эти циклы можно вкладывать, как и операции с if...else . Вложим?

Для второго цикла определим счётчик j .

var i, j; // Сначала нарисуем саму таблицу. // Внутренние кавычки (внутри тэгов) можно сделать одиночными, // а можно, как здесь, воспользоваться спецсимволом (см. урок 2) document.write("

")

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

Оператор for...in

Оператор for...in используется для анализа всех свойств объекта. В результате выполнения производится перебор свойств объекта. Переменная цикла при каждом повторении содержит значение очередного свойства. Количество повторений тела цикла равно числу свойств, определенных для объекта.

Синтаксис

For (переменная in объект) {инструкции}

переменная - переменная счётчика, как и для цикла for .

объект - любой объект JavaScript, который мы хотим «выпотрошить».

инструкции - код для тех действий, которые мы хотим произвести с объектом.

Итерация элементов массива

Что такое массивы, мы лучше узнаем через несколько уроков . Если объяснять «на пальцах», то это собрание в одном «флаконе» (объекте) маленьких «объектиков», которые мы с помощью различных кодов можем доставать из объекта-контейнера, как фокусник из цилиндра. Массивами являются некоторые встроенные коллекции документа: например, все картинки на странице - document.images , или же все ссылки - document.links .

Каждая ссылка - это отдельное свойство «большого объекта» - коллекции links . Размер всей коллекции (общее количество ссылок) тоже является её свойством. Давайте с помощью for...in пересчитаем все ссылки на данной странице.

Вообще, так сказать, «потенциальных» свойств в каждом объекте заложено очень много. И в разных браузерах эти дополнительные наборы могут отличаться. Как правило, эти «второразрядные» свойства объект не использует, и их значения являются пустой строкой или величиной null (то есть «ничто»). Но наш цикл будет добросовестно нанизывать эти километры ненужных свойств. Чтобы этого не было, мы поставим в нашей функции маленькую «заглушку» и выведем только реально существующие свойства.

Function showLinks() { var objName = "Links" var obj = document.links var i var msg = "" for (i in obj) { // Заглушка: выводим свойство только когда оно не пустое // и не null. if (obj[i] != "" && obj[i] != null) msg += objName + "[" + i + "] = " + obj[i] + "
" } document.write(msg) }

Переменная msg «нанизывает» на себя все значения свойств (если они есть) с переводом каретки (
), чтобы они располагались одно под другим. Чтобы вывести их на страницу, нужно теперь вызвать функцию:

Результат

Так вот, оказывается, сколько тут ссылок...

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

В IE отображаются только адреса и порядковые номера ссылок, а также общее их количество. Обратите внимание: общее количество на единицу больше последнего порядкового номера, потому что нумерация с нуля.

Браузеры Mozilla и Firefox выдают ещё имена функций, которые использовались в скрипте для всплывающих меню, тем самым участвуя в образовании ссылок:

Links = function item() { }
Links = function namedItem() { }

Полезное применение

Например, мы делаем страницу с множеством ссылок на другие страницы. Но эти другие страницы ещё не готовы. Допустим, чтобы не было неприятных «битых ссылок», мы поставили на несуществующие страницы текст ссылки . Но если такая ссылка находится в самом низу длинной страницы, то при нажатии на неё документ будет перемещаться в начальную позицию, что тоже раздражает.

Примечание

Вообще-то можно этого избежать, поставив не , а .

Тогда давайте в самом конце кода страницы , перед тэгом , поставим скрипт, проверяющий атрибуты href всех наших ссылок:

var i
for (i in document.links)
{if (document.links[i].href == self.location.href + "#" )
document.links[i].href = "javascript: alert("Извините, этот материал ещё в разработке.");"}

Небольшие пояснения:

1. Когда в атрибуте ссылки href мы прописываем "#" , браузер понимает это как адрес текущей страницы с нашим значком в конце. В JavaScript адрес текущей страницы находится в конструкции self.location.href . Для поиска «забитой» ссылки необходимо включить в атрибут эту конструкцию.

Примечание

Конечно, было бы проще сразу поставить все необходимые ссылки, а потом проверить присутствие/отсутствие этих страниц на сервере. Но для этого нужно воспользоваться другими языками: JavaScript - клиентский язык.

2. Почему в самом конце? Это как раз тот случай, о котором я упоминал в уроке 1 . Браузер читает код страницы последовательно. Если его просят пересчитать ссылки, когда он ещё не прочитал их в документе (например, если он помещён в head ), то он встанет в тупик и выдаст undefined . Если его поставить в середине страницы, то он остановится там, где находится. Поэтому нужно попросить его сделать выводы, когда он уже «переварил» всю необходимую информацию.

Просмотр свойств отдельного объекта

А теперь возьмём одну из этих ссылочек (допустим, одиннадцатую) и посмотрим, из каких свойств она состоит.

Function showLinkProps() { var objName = "Links" var obj = document.links var i var msg = "" for (i in obj) { if (obj[i] != "" && obj[i] != null) msg += objName + "." + i + " = " + obj[i] + "
" } document.write(msg) }

Вызываем.

В результате мы получили полное «досье» на эту ссылку (в «Мозилле» опять же с кучей дополнительных параметров, но без некоторых свойств, которые поддерживает только IE: innerText, outerText, outerHTML).

Сейчас нам совершенно не нужны эти подробности. Просто я показал, как работает оператор for...in. Когда вы станете более опытными, то иногда понадобится вот так вот «взламывать» объекты в поисках каких-нибудь «экзотических» свойств, с которыми можно поэкспериментировать и, возможно, решить какую-нибудь нестандартную проблему.

Итак, мы узнали:

  • как работает оператор цикла for;
  • как заглянуть внутрь объекта с помощью цикла for...in.
  • А также научились:
  • выводить сообщения на помеченные ссылки. Введение

    Объект - некоторая абстракция, которой можно дать уникальное и осмысленное имя. Оно (имя) отделяет конкретный объект от других подобных абстракций. Каждый объект обладает уникальным набором свойств. Эти свойства называются атрибутами. Каждый экземпляр объекта описывается конкретным набором значений атрибутов.

    Таблица является одним из объектов HTML, который обладает своими свойствами, методами, атрибутами. Для доступа к которым используют следующую конструкцию:
    document.getElementById(“идентификатор”).свойство | метод([параметры])

    Иерархическая структура таблиц

    Существует четыре дескриптора, с помощью которых можно определить различные области таблицы: описание, заголовок, тело и нижний колонтитул (соответственно: CAPTION, THEAD, TBODY и TFOOT).





















    Обратите внимание, в каком порядке идут эти элементы: сначала THEAD, затем TBODY и в конце TFOOT. Именно в такой последовательности браузер будет выводить содержимое этих элементов в независимости от того, как они будут расположены в коде.

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

    Использование данных элементов на сегодняшний день, наверное, является больше «хорошим тоном программирования» и встречается в сложных структурах таблиц. Элементы THEAD, TBODY, TFOOT опускаются за ненадобностью, так как это не мешает нормальной работе браузера.

    Свойства (атрибуты)

    Border
    Задаёт толщину границ таблицы.

    ...

    Rules
    Используется для управления отображения границ исключительно ячейками.
    Различают пять значений свойства rules:

    ...

    Frame – значение: строковая константа; доступ: чтение/запись
    Используется для управления отображения сторон границы таблицы.
    Различают девять значений свойства frame:

    …

    BorderColor – значение: строковое представление цвета; доступ: чтение/запись
    Задаёт цвет отображения границы.

    …

    Cellspacing – значение: целочисленное; доступ: чтение/запись
    Задаёт расстояние между ячейками.

    …

    Cellpadding - значение: целочисленное; доступ: чтение/запись
    Определяет поле между краем ячейки таблицы и её содержимым.

    …

    Align –значение: строковая константа; доступ: чтение/запись
    Предназначено для управления горизонтальным выравниванием таблицы относительно внешнего контейнера.

    Различают три значения свойства align:

    Bgcolor - значение: строковое представление цвета; доступ: чтение/запись
    Задаёт цвет фона таблицы.












    красный красный
    зелёный белый

    Height, Width – значение: целочисленное или длина строки; доступ: чтение/запись
    Эти два свойства предназначены для хранения значений высоты и ширины, присвоенных элементу TABLE. Значение может приниматься как в пиксельном, так и в процентном соотношении.












    … …
    … …

    Cells – значение: массив; доступ: только чтение
    конструкция: document.getElementById(“идентификатор_таблицы”).cells
    Возвращает массив, который содержит описание всех атрибутов, всех элементов TD таблицы.




    function f()
    {
    var td_cells=document.getElementById("tbl").cells;
    for (var i=0; i







2024 © gtavrl.ru.