В этом уроке мы с вами создадим такую программу, которой даже сейчас использует одна местная типография в нашем городе. Суть её вот в чем, нередко в типографию отправляют многостраничный сайт, где заказчик просит напечатать первую страницу, допустим, в 8 копиях, вторую, в 5, 3ью в 12 и т.д. И печатнику приходится отправлять все эти копии по отдельности, и также по отдельности их все печатать, что сильно расходует его время, так как в современных программах нет функционала отправки одним файлом сразу всех страниц с разным количеством копий.
Можно конечно в ручную в разделе страницы через запятую написать сколько копий каждой страницы, но это тоже утомительно и легко ошибиться. Чтобы помочь печатникам мною была разработана такая небольшая программа, которая сама проставляет копии страниц. Например первую страницу нам надо напечатать в 8 копиях. Пишем номер страницы и количество копий, нажимаем на выполнить. И вот программа сама набрала через запятую первую страницу 8 раз, итак вторую нам надо в 5 копиях, третью в 12, и теперь этот текст мы можем копировать в поле страницы любой программы для печати.
Конечно, есть много способов улучшить эту программу, но я решил её воссоздать в этом уроке именно такой, какой я её создал много лет назад, когда только начинал программировать. Чтобы мы с вами сейчас прошли мой путь начинающего программиста. Кстати, эта программа, единственная которую я создал в самом начале своего пути в программировании, и которая сейчас используется.
Давайте же создадим её. Так как в этом курсе говорилось что вы должны на базовом уровне владеть HTML и CSS, я думаю с текстовым редактором для набора кода вы уже определились. Я выбрал Visual Studio Code, вы же можете работать в любом текстовом редакторе для программирования.
Если ваш выбор тоже пал на Visual Studio Code, то я должен сказать какие расширения у меня стоят, а их всего два – это русский язык и Open In Default Browser, который позволяет открыть наш файл с кодом в браузере, который у нас установлен по умолчанию через комбинацию клавиш или контекстное меню.
Создам папку, где будут хранится наши программы, назову ее ProgramsJS. Создам новый html файл с именем pages.
Так как в Visual Studio Code по умолчанию встроен плагин Emmet, то я могу набрать необходимые теги для html просто написав восклицательный знак и нажав на кнопку Tab.
Изменю название документа документа и язык:
В теге боди создадим тег Form с 4-мя тегами p.
Атрибут action нам не нужен. В первом теге p будет тег input с такими атрибутами.
Во втором теге p тоже будет тег input с такими атрибутами. Далее нам нужна ссылка куда мы будем нажимать. Лучше бы использовать тег button, но как я говорил, мы создадим эту программу в её изначальном варианте. На других практиках мы будем использовать уже кнопки.
В четвертом теге p мы создадим текстовое пуле куда программа будет записывать результат своей работы. Итак проверяем. Для удобства расположим по центру нашу форму. CSS стили я напишу здесь. Есть много способов расположить тег по центру, и я воспользуюсь таким, превращу тег боди в флекс объект. И отцентрую его внутренний контент.
Далее чтобы написать код javaScript, нам надо для начала написать тег <script>, его можно написать как а теге head, так и в теге body. Когда мы пишем его в теге head то он обработается транслятором до того как отобразить сайт в браузере. А Когда вы пишете его в конце тега body, то он обработается после того, как сайт отобразится на экране монитора. Вы можете написать тег скрипт и за тегом боди, браузер все равно исполнит ваш код, но это считается не правильным. Любой html-валидатор, который ищет ошибки в коде, выдаст в этом месте ошибку.
Итак, давайте в начале создадим переменную, которая будет содержать в себе все копии страниц, которые мы будет указывать. Назовем ее textForResult и сразу присвоим ей значение пустой строки, чтобы транслятор не присвоил переменной значение undefined.
Далее мы должны написать функцию, которая будет вызываться, когда мы нажимаем на ссылку выполнить. Назовем функцию clonePages, параметров у нее не будет. Далее создаем константу, которая будет хранить в себе значение из поля со страницей. Здесь можно и переменную использовать вместо константы, но принято, если мы не собираемся менять значение, все же использовать константу. Как помните, константы именуются заглавными буквами, где разделителем слов выступает нижний пробел.
Итак первая константа будет называться TEXT_FROM_PAGE. И чтобы присвоить ей значение значение поля, мы воспользуемся объектом документ. У объекта document есть много методов, как получить доступ к тому или иному тегу. Нас интересует свойство getElementById, который получает доступ к тегу по его id. Также у данного объекта есть методы getElementsByClassName, который получает доступ к тегам через их классы, getElementsByTagName, который получает доступ к тегам по именам их тегов и т.д. Набираем необходимый метод. В скобках в кавычках мы должны написать id. Но это еще не все, мы пока получили доступ ко узлу тега, но нам нужен именно текстовый узел. Чтобы в этой константе хранился именно текст, который мы будем набирать в поле Страница. У тегов формы HTML есть атрибут value который хранит текстовое значение в поле этого тега. И когда мы работаем с узлами тегов из DOM (также их можно называть объектами DOM) то нам становятся доступны атрибуты этих тегов как свойства. Ставим точку и пишем название атрибута value.
Теперь создаем следующую константу которая будет хранить копии страниц. назовем ее TEXT_FROM_QUANTITY, в значении пишем практически все тоже самое но меняем Id. Только у нас есть одна проблема. Свойство валью возвращает значение в тексте, а нам значение этой константы нужно как число. Можно просто здесь поставить знак плюс, но тогда я унарного знака плюс еще не знал, и воспользовался встроенной функцией parseInt
В первом параметре мы должны указать строку, которую надо преобразовать в число. А затем мы можем указать второй параметр, где мы говорим функции какая числовая система нам нужна, если двоичная. то пишем число 2, если десятичная то пишем число 10, но так как по умолчанию в этом параметре итак указано число 10, то мы его можем пропустить, если используем десятичную систему счислений.
Так как эта цепочка методов вернет нам строку, то это выражение мы можем поместить в качестве первого аргумента для функции parseInt.
Далее нам надо написать цикл, который будет добавлять номер страницы в переменную столько раз, сколько у нас сдержится в константе TEXT_FROM_QUANTITY. Использовать я буду цикл for. В инициализации я создам переменную i равной нулю, проверка будет выдавать true пока переменная i меньше значения TEXT_FROM_QUANTITY, и затем мы напишем выражение инкрементирование, где i будет увеличиваться на 1 после каждой итерации.
На самом деле мы могли не переводить текст в число для константы TEXT_FROM_QUANTITY, транслятор все сам бы понял что мы от него хотим в этой проверке и перевел бы сам текст в число, но постоянно надеяться на транслятор нельзя. ведь однажды он может вас понять не так как вы хотите, и ваша программа не будет работать правильно.
Далее в фигурных скобках мы напишем чтобы переменной textForResult с помощью оператора присвоение, в данном случае с конкатенацией, добавлялся номер страницы и запятая.
Т.е. если мы в первое поле напишем 1, а во второе 8, то первая константа будет хранить текстовое значение 1, вторая константа будет хранить значение 8. Далее запустится цикл, переменная i в первой итерации равна 0, проверка выдает тру, переменной textForResut присваивается значение 1и запятая, далее, переменная i становится равна единице, проверка выдает true, к переменной textForResult, добавляется текст 1 и запятая, и так еще 6 раз пока проверка не выдаст false.
Когда цикл закончится, то мы должны вывести значение переменной, textForResult в поле тега textarea. Делается это все также через объект документ, метод getElementById и атрибута value, толь теперь мы не берем оттуда значение а присваиваем его. Готово. Теперь мы должны сделать так, чтобы кликая по ссылке вызывалась функция. Вмё также очень просто. Надо в ссылке указать, что мы будет использовать код javascript, и через двоеточие вызовем функцию. Теперь при клике по ссылке будет вызываться функция. Т.е. в атрибуте href можно указывать не только абсолютные и относительные ссылки, якоря и т.д., но и код javascript. Проверяем. Как видим, все работает.
Вы можете спросить, а почему мы используем константы для хранения значений этих полей? Ведь набирая все новые страницы и их количества мы постоянно меняем их значения. Дело в том что эти константы существуют пока выполняется функция. Т.е. вы нажали на ссылку, запустили функцию, она создала константы, выполнила оставшийся код и завершила работу, после чего из памяти компьютера были стерты эти константы, их больше нет, осталась только переменная textForReuslt, которая находится вне функции, и поэтому остается в памяти, пока мы не обновим страницу. Затем запустив следующий раз функцию, она снова создает константы, снова выполняет остальной код, и завершает работу, и снова этих констант больше не существует в памяти.
Итак у нас осталась одна проблема – эта запятая после последней страницы. Ее по идее быть не должно, давайте это исправив. Я придумал такой способ с помощью условного оператора If, который будет находится внутри цикла for
Итак, я хочу, если переменная равна пустой строке, то внести туда значение константы TFP без запятой, а если не равна то уже прибавлять к значению запятую и страницу.
Получается, если мы наберем страницу 1 в 8 копиях, то первая единица запишется без запятой, а затем уже будет срабатывать только код внутри else, т.е. будет прибавляться запятая и номер страницы.
Проверяем. Готово!
Домашнее задание:
вы должны создать программу которая будет рассчитывать процент от числа. Т.е. в первое поле пользователь должен ввести процент, во второе число, и при клике на Выполнить, программа должны посчитать процент от числа и вывести результат. Для тех кто не помнит, процент от числа рассчитывается так: процент/100*число.
