Сайт под ключ
В этом примере я хочу обсудить возможности javascript программы работать с текстом. Под текстом я буду понимать набор символов любого размера и любой степени сложности. В частности текстом является контент любого сайта. Вот привлекательная задача: сделать javascript программу, которая бы сама генерировала содержимое сайта так, чтобы осталось только скопировать файл на сервер и все дела. И ведь это реально очень важная задача, так как сейчас происходит процесс привлечения в интернет все большего количества людей, не обладающих знаниями и умениями сайто-писателей. Одним из механизмов такого процесса являются социальные сети типа Facebook, Google+ или Яндекс-фотки. Сетей очень много, я не ставлю цель все их перечислить. Другое направление состоит в создании программ сайто-конструкторов, а также установки встроенных программ изготовления сайтов прямо на сервере, так называемые CMS (content management system). Но все это сложнейшие системы, разрабатываемые профессионалами с использованием всего арсенала средств программирования серверов.
Я же хочу поговорить о конкретной программе, которую может написать любой желающий с использованием только языка javascript на стороне клиента для облегчения написания собственных сайтов определенного типа. Как может выглядеть такая программа? С учетом того, что она не может работать с файлами, остается только один выход - это организовать на сайте текстовый редактор. В окно текстового редактора можно передать текст через буфер обмена используя клавиши [Ctrl]+[A] (высветить все), [Ctrl]+[C] (скопировать в буфер) и [Ctrl]+[V] (скопировать из буфера). Первые две операции делаются в окне редактора - источника, а последняя операция выполняется в окне редактора приемника. Таким образом можно передать текст из окна редактора на компьютере в окно редактора javascript-программы в интернете и потом совершить обратную передачу результата работы программы в новый файл готового сайта. Ну а редактор на компьютере может как прочитать текст из файла, так и записать текст в файл. Интересно, что размер текста при такой передаче не лимитирован, точнее лимитирован, но этот лимит очень большой и его вполне достаточно для многих целей. Очевидно, что текст, который надо передать в редактор, должен содержать начальные данные и инструкцию программе о том, что она должна делать. То есть это тоже должна быть инструкция, но написанная на другом, более простом, языке, который непосредственно связан с той задачей, которая решается. Задача себя оправдывает, если приготовить такой текст намного проще и быстрее, чем текст - результат работы программы.
Если делать программу не для себя, а для всех желающих, то необходимо дополнить информацию также инструкцией для пользователей с подробным описанием что делает программа и как приготовить входной текст. Ну, и в общем случае желательно входной текст запоминать с тем, чтобы его можно было выставить в окне редактора снова, если в нем были ошибки, и исправить ошибки. Таким образом, дизайн такой программы может быть очень простым: три кнопки и окно редактора. Кнопки можно назвать [Help] [Input] [Execute]. Окно редактора может быть не очень большим с учетом возможности работы на нетбуках и планшетах. В окно любых размеров можно вставить сколь угодно длинный текст. Ниже я покажу примерный код оформления такой программы и объясню как он работает.
Выше я показал только основную структуру сайта без конкретного алгоритма обработки текста. Таких алгоритмов может быть много и это отдельный разговор. Как обычно, текст сайта имеет головную часть и тело. В головной части можно определить название сайта, кодировку русских букв, задать стили, если необходимо и затем надо описать скриптовую часть. В ней можно определить какие-то глобальные переменные и затем, в соответствии с нашим проектом нужно определить три функции для трех кнопок. Функцию help() для кнопки [Help] удобно сделать так, чтобы она открывала новое окно и записывала в него текст инструкции. Дело в том, что инструкция понадобится только в самом начале работы, пока еще нет навыков работы с программой. А потом она будет не нужна. И лучше сделать так, чтобы ее не было на экране постоянно, потому что с какого-то момента она начнет раздражать.
Новое окно на языке javascript открывается свойством (методом, функцией) open встроенного объекта window. Конструкция
В текстовой строке также не может быть символов переноса строки. Вместо этого надо писать в явном виде знак специальный символ \n, затем закрывать строку символами '+ (если используются одинарные кавычки) и после этого переносить текст на новую строку и снова открывать кавычки. В принципе, делать много переносов не обязательно, для удобного чтения можно ввести режим wrap=on, то есть автоматического переноса строк при достижении ими края окна редактора. Но если строка очень большая, то несколько раз ее можно перенести. После того, как вся строка сформирована, нужно записать ее в документ и закрыть документ. Следующая функция input() для соответствующей кнопки, в принципе, для работы программы не нужна, но в общем случае полезно ее иметь для того, чтобы вернуть в окно редактора исходный входной текст программы. Функция содержит только одну команду, а именно засылает в редактор строку inp. Во избежание недоразумений полезно в эту строку первоначально записать инструкцию, как у меня записано. Наконец третья функция exec() запускается при нажатии кнопки [Execute]. Эта функция является основной в программе. Прежде всего, она запоминает в строку inp содержимое окна редактора в момент ее вызова. Затем она формирует текст, который после окончания этого процесса записывается в окно редактора. Отмечу по ходу, что в javascript часто приходится запрашивать теги HTML по их id коду. К сожалению в стандарте javascript это сделано оператором с очень длинным имеем. Чтобы сократить код полезно использовать функцию geid(id), которая просто дает новое название стандартной функции. Такой прием широко используется в JQuery, где это выдается как суперноваторство. Реально переопределение названий функций -- это назначение любого языка более высокого уровня.
Что представляет собой процесс формирования текста. Естественно сначала надо записать основные теги сайта, а между ними все то содержание, которое появится на сайте, или код javascript, который будет работать на сайте. При формировании текста могут понадобиться вычисления разной степени сложности. При этом надо уметь преобразовывать числа в текстовом представлении в реальные числовые переменные, а также числовые переменные снова записывать в текст. Это делается так: для преобразования теста в числовую переменную можно использовать функцию eval(), о которой написано в примере "Калькулятор". Для обратного преобразования достаточно сложить текст с числовой переменной, преобразование произойдет автоматически. Складываются текстовые и числовые переменные посредством знака + (плюс). Надо еще уметь разделить текст на части. Для этого надо записывать в текст символы разделители, например, символ вертикальной черты "|" и затем функцией split('|') можно из одной строки сделать массив строк. Итак, формирование нового текста можно сделать методом расщепления исходного текста, написания новых кусков текста и сложения всех кусков вместе. Если за один прием сложить не удасться или не удобно, то можно сначала определить текстовую переменную, а затем прибавлять к ней новые куски с рекурсией. Но я не люблю рекурсию, поэтому я определил строковый массив и каждый раз определяю новый элемент строкового массива, прибавляя к нему предыдущий элемент и новый текст. У меня такое предчувствие, что так будет надежнее. А в конце последний элемент массива надо вставить в окно редактора.
Я не привожу примера в данной главе. Но каждый может посмотреть примеры готовых программ, сделанных по описанному выше методу ЗДЕСЬ и ЗДЕСЬ. А результат их работы, то есть фото-шоу "Сингапур", можно увидеть ЗДЕСЬ. А ЗДЕСЬ можно посмотреть красивый каталог моих последних сайтов фото-шоу с возможностью запуска любого из них. В принципе, можно скопировать текст из окна данной статьи в отдельный файл и запустить его. Браузер покажет внешний вид программы. В данной главе я говорил про генерирование текста сайта под ключ. На самом деле по такой методике можно делать программы любого преобразования исходного текста в текст-результат. Конечно делать примитивные операции типа замены одних символов на другие не интересно, это делает любой текстовый редактор. Но можно, например, генерировать постскрипт файлы разных графиков и схем. Например задать числовые значения функций и получить их графическое представление в виде кривых и маркеров на осях координат. Можно даже делать матрицы графиков. Можно делать чертежи и многое другое. Важно, что при этом не надо использовать платные монстры типа Corel Draw и им подобные, которые возможно и не смогут сделать то, что именно вам нужно. Каждый может сам себе написать программу.
Автор: Виктор Кон, 9.09.2013
