Javascript создание таблиц с формулами.
- арифметическая прогрессия (сумма);
- арифметическая прогрессия (числа по порядку);
- таблица умножения
Хотя 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 , таблицы надстраиваются горизонтальными рядами
Рассмотрим содержимое первого горизонтального ряда.
Первый множитель увеличивается на единицу. Второй остаётся без изменений.
А в вертикальных столбцах - наоборот. Первый стоит на месте, а второй приращивается.
Рядов
Попробуем сначала сформировать все
var i; for (i = 2; i "); document.write("")}
Почему от 2 до 10, а не от 1 до 9?
Догадайтесь с трёх раз...
Ну конечно, мы их потом будем использовать и для значений содержимого таблицы, а оно начинается с 2х2.
Наш первый
То есть внутри него ещё один цикл - из .
Эти циклы можно вкладывать, как и операции с 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.
- А также научились:
- выводить сообщения на помеченные ссылки.
- арифметическая прогрессия (сумма);
- арифметическая прогрессия (числа по порядку);
- таблица умножения;
- for...in: извлечение свойств из объекта
Хотя JavaScript не универсален и не всемогущ, не велик и не ужасен, это всё же язык программирования, и он позволяет выполнять сложные математические вычисления. Иногда возникают ситуации, когда требуется многократно выполнить программный код, пока не выполнится определённое условие. Допустим, сдать карты в пасьянсе (очень хитроумная задача). Или сложить подряд числа от 1 до 15 (простейший вариант). Для этих целей существуют операторы, которые позволяют выполнять циклы - повторяющиеся действия.
Оператор forЕго синтаксис напоминает оператор if : условие в круглых скобках, код - в фигурных. Но условие более сложное:
for (начало; область действия; шаг) { код}Начало: здесь задаётся начальное условие, при котором оператор включается.
Область действия: границы, в которых выполняется код.
Шаг: способ продвижения цикла от начального к конечному условию.
Арифметическая прогрессия
Предположим, нам надо узнать и записать на странице сумму всех чисел подряд от 1 до 10.