JavaScript – самый часто-используемый встраиваемый язык в интернет-браузерах. Он используется для программного доступа к объектам веб-документа как язык сценариев для придания интерактивности веб-страницам.
JavaScript заявлен как мультипарадигмальный. Ниже я покажу как использовать его одновременно в двух парадигмах:
· объектно-ориентированное (прототипное) программирование (ООП);
· событийно-ориентированное программирование.
Адрес страницы (она Not secure – не обращайте внимания – нет денег платить за SSL сертификат. См. Ниже ссылку на мой Юмани... ):
http://starina.h1n.ru/Fence/Fence_arch.html
Немного о функциональности страницы «Построение арки забора из металлоштакета» для пользователя (это прямая цитата со страницы):
При строительстве забора из металлоштакета часто хочется иметь красивые пролёты в виде арки. Здесь мы имеем две небольшие проблемы:
Столбы уже стоят, забетонированные в фундаменте, причём пролёты имеют разную длину, т.к. это зависит от формы участка, который нужно окружить забором.
Кроме того, пролеты в разных местах могут иметь разную высоту.
Выбранный металлоштакет имеет определённую ширину, но длину каждой штакетины в заборе для заказа мы должны определить сами.
Производитель обычно принимает заказы по длине с точностью до 1см. Т.е., для всего забора нужно составить заказ с указанием необходимых длин.
Крайне нежелательно самому обрезать металлоштакет - срезы получаются некрасивые, незащищённые и быстро ржавеют. Производитель при выполнении заказа производит антикоррозионную обработку срезов.
Данная программа поможет с расчётом количества и длин металлоштакета для заказа.
Ниже приводится схематическое изображение арки забора с обозначением исходных размеров, необходимых для расчёта.
На схеме обозначены размеры арки и желаемая высота изгиба. Пользователь вводит свои данные в ячейки таблицы
и нажимает кнопку
Введенные данные проходят:
· Валидацию (проверка корректности ввода. Например, в цифровом поле не может быть букв);
· Верификацию (проверка данных по смыслу. Например, длина пролёта L не может быть больше 10 метров).
Затем после расчета калькулятора пользователь получает 2 таблицы с длинами штакетин:
1. Таблица для рабочего – длины штакетин последовательно по номерам – для сборки забора. Можно распечатать её на бумаге и отдать работникам;
2. Таблица для заказа металлоштакета на фирме – количество металлоштакетин для каждого размера в заказе (а также количество саморезов для покупки).
Но затем начинается самое интересное – нажав кнопку
«Построить эскиз по рассчитанным параметрам.», мы увидим мультфильм с построением эскиза для рассчитанного забора в масштабе и цвете – в медленной прокрутке.
Цвет я выбрал сам, похожий на мой реальный забор. Колонны и основание срисовал с древнеегипетских росписей – по-моему, неплохо вышло.
Здесь работает типичное ООП – каждый элемент забора вплоть до отдельного самореза – это экземпляр определённого класса, который сам взаимодействует с документом HTML5 через CSS3. Дерево классов построено классическим для ООП способом – от общего к частному, инкапсуляция и наследование, зачатки полиморфизма - имеется даже подобие виртуальных методов, насколько это возможно в JavaScript.
Я использовал стандартный JavaScript версии 1.8.1, никаких библиотек и фреймворков. Всё что работает на странице, описано здесь же на JavaScript.
Далее, важный шаг, сверху мы имеем кнопки управления, который позволяют интерактивно управлять прокруткой мультфильма (можно прокручивать и в обратную сторону – будет демонтаж забора):
Причем кнопки можно нажимать в любом порядке -
Вот здесь, при управлении данным слайд шоу, на 100% используются возможности JavaScript для событийно-ориентированного программирования. Их на самом деле мало, но они есть и позволяют делать такие вещи как мультик с построением забора.
Кроме обычных стандартных событий в HTML, типа onclick, и метода addEventListener()
есть ещё два важных метода объекта window для обработки временных событий :
setTimeout(function, milliseconds)
setInterval(function, milliseconds)
С помощью этих двух методов, и их взаимодействия с методами нашего дерева классов, можно управлять выполнением программы с помощью событий HTML и временных событий.
Таким образом, всё возможно сотворить при небольших затратах кода и используя только стандартные возможности HTML5/CSS3/JS.
Все исходные тексты доступны на странице http://starina.h1n.ru/Fence/Fence_arch.html
для изучения, как это и должно быть на фронт-енд стороне.
Если вы дочитали эту статью до конца, просьба подписаться на мой сайт. Яндекс обещает авторам что-то полезное после 10-и подписок.
Если у кого-то появились дополнительные вопросы по методам и объектам программы на JS , а также если Вы хотите поблагодарить автора, прошу выразить это денежным подарком через Юmoney на кошелёк 4100117793355888.