Создание интерактивной страницы с использованием скриптов JavaScript

Научимся использовать простейшие возможности языка JavaScript для создания интерактивной страницы, содержащей простейший калькулятор.

Предполагается, что элементарные знания HTML и JavaScript имеются, здесь они будут систематизированы и развиты.

Для организации страницы необходимо, во-первых, написать HTML-код для создания необходимых элементов оформления страницы, а во-вторых, написать скрипты для реализации необходимых действий.

Страница

• Имеет в строке заголовка окна текст «Проба JavaScript»
• Фоновый цвет задается по выбору автора
• На странице находится заголовок, выровненный по центру, цвет текста, родственный фоновому«Страница со скриптами на форме»
• Содержит форму, объединяющую активные элементы.
• Активные элементы: три текстовых окна для ввода данных и вывода результатов, четыре кнопки арифметических действий.

Написание HTML-кода

Создаем самый внешний контейнер

Добавляем в него раздел заголовка

В разделе заголовка создаем контейнер строки заголовка окна

Добавляем после

…обязательный раздел тела страницы

Чтобы страница имела заданный фоновый цвет, нужно в открывающий тег контейнера

добавить атрибут bgcolor со значением цвета (6-значное 16-ричное число, состоящее из больших цифр для получения светлого цвета). Мне нравится цвет, выражающийся числом abcdef  – серо-голубой. Можно выбрать один из именованных Web-цветов, например, DARKSALMON=E9967A , или его осветленный вариант FAA78B.

Все содержимое страницы должно быть описано внутри контейнера

Внутрь контейнера

добавляем контейнер заголовка 1 уровня, выровненный по центру

Страница со скриптами на форме

Изменим цвет заголовка так, чтобы он вместо черного по умолчанию он стал хотя и темным, но оттеночно близкий фоновому. Подобрать приблизительно этот цвет, не углубляясь в теорию цвета можно, выбрав для темного малые цифры, разность между которыми будет точно такой же, как и для светлого. В данном случае для светлого abcdef родственным темным будет 123456 (вариант 012345 – слишком темный). Т.е. нарастим вокруг текста зеголовка (либо вокруг контейнера заголовка) контейнер   Страница со скриптами на форме

Теперь можно добавлять форму, создав контейнер

 В данном, довольно простом случае, нет необходимости присваивать форме атрибуты, по привычке добавлю только  name="myform1":

Напомним, что форма сама по себе на странице не видна.

Форма – контейнер, содержащий активные элементы. Ничто не мешает размещать их непосредственно на странице без использования формы, но для по-настоящему эффективной работы такой подход неприемлем. Поэтому внутри контейнера

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

Все эти элементы создаются тегом input, различия между ними зависят от атрибутов. Обязательный атрибут тип: type=text означает текстовое окно, type=button означает кнопку. Необязательный атрибут имя можно не присваивать кнопкам, но безымянное текстовое окно никаким разумным способом применить нельзя. Имена объектов присваиваются по определенным правилам и должны быть уникальными, по крайней мере внутри одной форме. Атрибут value  означает надпись в окне или на кнопке, если атрибут не присвоен, то надписи пусты, что для кнопки было бы неудобно. Атрибут value может измениться при выполнении скрипта, причем и у текстового окна, и у кнопки.

Если эти элементы созданы на форме

то результат будет выглядеть так:

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

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

Написание скриптов.

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

В данном случае понятно, что объектами будут кнопки, а их событиями – щелчок по кнопке.

Итак, для каждой кнопки нужно вызвать обработчик onClick события Click и назначить ему скрипт: onClick=”…”. Скрипт заключается в кавычки, а если внутри него тоже нужны кавычки, то вместо них допустимо использовать апострофы, а внутри апострофов кавычки и т.д. В этом случае выражение будет прочитано однозначно.

Что должна делать кнопка «+»? Она должна взять значения, вписанные в два первых текстовых окна, сложить эти числа, результат записать в третье текстовое окно.

Значение первого текстового окна text1.value, второго – text2.value, их сумма text1.value+ text2.value должна стать значением третьего текстового окна text3.value: text3.value= text1.value+ text2.value. Все, как-будто, правильно, однако, результат будет вовсе не тот, на который мы рассчитывали. Сложив 2 и 5 получим 25, а сложив 5 и 2 получим 52, но никак не 7. Дело в том, что в текстовое окно можно вписать, например, «Вася», при этом совершенно очевидно, что это не число, а текст (строка). Действительно, величина text1.value имеет значение типа текст (строка). Если величина некоторого типа входит в выражение, которое предполагает значение другого типа, то неявно происходит преобразование к нужному типу. (Если текст, подлежащий преобразованию, представляет собой запись числа, то преобразование будет выполнено, если нет, то результатом преобразования будет `никакое` числовое значение). Однако в выражении a+b знак «+» может для числовых величин означать сложение, а для текстовых конкатенацию (склеивание). Поэтому в выражение text1.value+ text2.value происходит склеивание текстовых величин. Остальные арифметические действия не имеют текстовых аналогов, поэтому происходит преобразование в число. Если включить в выражение text1.value+text2.value нейтральное арифметическое действие (умножение или деление на 1), вызывающее преобразование к числовому типу, то нужный результат будет достигнут: text3.value=1*text1.value+1*text2.value.

Для других арифметических действий это преобразование выполнится автоматически.

Теперь теги кнопок изменятся, включив в себя скрипты, и форма приобретет вид:

На первый взгляд все работает нормально, но представьте себе, что во второе текстовое окно не вписано ничего, а нажата кнопка деления. Чего можно ожидать при делении на 0? Естественно, ошибки.

Т.е., скрипт пытается выполнить действие, не может из-за негодных исходных данных, выдает нечисловой результат. Хороший скрипт не должен приводить к попыткам выполнить недопустимые действия.

Защитим операцию деления от нулевого делителя: пусть, если делитель равен 0, то в окно результата выводится сообщение «ошибка - деление на 0» и кроме того, чтобы обратить внимание пользователя на ошибку, дополнительно выведется окно сообщения «ошибка», а в ином случае действие деления будет выполнено с выводом частного в окно результата. Тогда скрипт будет иметь вид: onClick="if ((1*text2.value)==0) {text3.value='ошибка - деление на 0';alert('ошибка');} else {text3.value=1*text1.value/(1*text2.value);}"

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

За исключением этого несовершенства страница с калькулятором готова. Ее полный текст - смотрите документ.