Javascript. О том, что я знаю и умею

Виктор Кон,   05-05-2021,   eml: kohnvict@yandex.ru

Ссылки на интернет

Введение

Эта статья -- не учебник, а скорее путеводитель и рассказ о моих увлечениях в области вэб-программирования на языке Javascript (далее JS). Сначала краткая история. Я научился программировать очень давно, в те времена когда даже языков программирования не было, все программы писались прямо в коде компьютера, а компьютеры умели только считать. Ввод данных выполнялся с перфокарт, выдача результатов на бумагу. В то время уже был Алгол, но он был не эффективен, очень медленно работал, все равно все писали в коде. Потом в нашем институте появился компьютер БЭСМ-6 и он работал на фортране. Это период был довольно продолжительный. Потом появились персональные компьютеры, дисплеи, графика, но фортран оставался. Я немного выучил ассемблер и писал на нем процедуры, которые фортран понимал, так что мой личный язык был мощнее фортрана. В 1992 году я сделал на фортране интерпретатор собственного языка программирования, потому что некоторые вещи было удобнее и быстрее делать без компиляции, а таких программ я не знал. Он тогда назывался Квик.

В то время я не знал, что в это же время был разработан язык Питон, который сейчас стал очень модным. Я его тоже выучил в прошлом году, но пришел к выводу, что мой язык удобнее, по крайней мере лично для меня. Интерпретатор Питона сразу написан на языке С, а у меня был на фортране, что примерно одно и то же. В середине 90-х я узнал про язык программирования Постскрипт для графики и с большим трудом нашел информацию о нем, а потом и выучил. В то время я часто ездил за границу, там и нашел, в России ничего не было. Доступ к интернету я получил в 1998 году в Германии. В том же году я выучил язык JS и попробовал что-то на нем делать. Кое-какие программы того времени до сих пор живы, а калькулятор [1] я даже до сих пор постоянно использую.

Вернувшись из Германии я открыл свой сайт на сервере chat.ru. И взял себе ник (kohnvict). Этот сайт до сих пор существует несмотря на то, что я его уже очень много лет не трогаю. Однако в то время JS был не очень-то развит, у него не было графики, и он, в основном, мог что-то делать с картинками и расчеты, но без ввода данных из файла и выдачи результатов в файлы. И я, написав какую-то информацию про себя, перестал им заниматься. В 2003 году я решил, что пора заканчивать с фортраном, так как на нем было очень неудобно писать интерфейсы с пользователем. Выбор был между Питоном и Java. Я выбрал второй язык и стал учить Jаvа. Он тогда был моднее Питона и свободно мог работать в интернете. И вот на нем-то, как раз, можно было делать все, что угодно.

Начало. Сайт "Технология Интернета"

Вторично интерес к языку JS появился после того, как язык Java объявили небезопасным для интернета и браузеры запретили запуск Java апплетов. Не то, чтобы совсем запретили, но процедура разрешения оказалась настолько сложной и кажется даже не бесплатной, что любителям тут делать было нечего. А я в то время уже переписал интерпретатор своего языка на Java, он стал называться ACL. И я сделал его даже в виде апплета, так что мои ACL программы могли работать в интернете. И все это накрылось медным тазом. С другой стороны, в JS появилась графика и он стал бурно развиваться. Было написано много разных фреймворков. И я заново стал его изучать. Даже скачал и попробовал фреймворк JQuery, но он мне не понравился. Я могу и свои процедуры писать.

Меня интересовали две темы: (1) возможность писать на JS научные программы с графикой и без, (2) программы показа фотографий, то есть слайд-шоу. После того, как я что-то немного выучил и попробовал, я решил все это записать аналогично тому, как я это записывал про языки программирования ACL (мой), Java и Постскрипт. Я сначала все написал в виде книги, но потом переделал в форме сайта, который имел вид программы, то есть с меню, рекламой и окнами, в которых текст менялся при клике на кнопках. Я назвал этот сайт "Технология Интернета" (СТИ) и он до сих пор существует. Я даже иногда им пользуюсь, вот ссылка на сайт [2]. СТИ первоначально был на сервере Яндекса. После того, как Яндекс закрыл свои сайты, они перешли к Юкозу, который навесил на них рекламу и они фактически пропали. Я все стал переносить на свой сайт Юкоза, где можно показывать свои собственные страницы без рекламы.

На сайте было дано введение не только в язык JS, но также и в HTML, CSS, DHTML и Java. Дело в том, что сам по себе язык JS очень редко используется, очень часто он просто изменяет свойства объектов языка HTML и CSS. И иногда эти объекты необходимо или более удобно выставить заранее. А можно и просто статичные объекты писать на HTML и CSS, так проще, а динамичные -- на JS. Можно и так сказать, что нет такого отдельного языка программирования JS, а есть один язык, который разделен на три части. Например, в Java все делается на одном языке и есть просто один интерпретатор. А язык создания сайтов разделили, потому что очень много сайтов можно создать совсем без JS. И исторически так и было.

Язык создания динамичных сайтов, на которых статические объекты меняют свои свойства во времени стали называть DHTML, так как это реальная смесь HTML и JS, в которой расчеты имеют вспомогательный характер, а главное -- создать динамику. Например, шарик катится, на поверхности воды бегут волны и так далее. Таким же свойством обладает и слайд-шоу. Там в одном и том же окне могут меняться картинки, полностью или частично. И в разделе СТИ про DHTML описаны мои первые программы показа слайд-шоу. Точнее, возможно даже не первые, история длилась так долго, что я уже не помню точную хронологию.

Кажется, еще до создания СТИ я записал отдельный сайт про программирование слайд-шоу [3]. Но потом оба сайта неоднократно переписывались и на обоих есть ссылки друг на друга. Какие тут были проблемы: (1) как подключить музыку (2) как менять картинки (3) как делать фасонные переходы при смене картинок (4) как сделать мини-анимацию в виде движения картинки через окно. Я разработал разные модели и первые слайд-шоу управлялись очень большим числом параметров или имели очень много кнопок, которые позволяли все менять. Но реально это никто не делал. Все, и я в том числе, просто смотрели анимацию при тех настройках, какие были установлены с самого начала и все.

И даже этого было достаточно.Смотреть красивые картинки под красивую музыку было приятно. Конечно, одновременно развивалось видео и там возможностей еще больше, но видео все таки очень сложно создавать и файлы видео имеют большой размер. Для уменьшения размера файлов делают картинки малого размера, тогда теряется качество при показе на весь экран. В слайд-шоу можно было показывать большие картинки с хорошим качеством. В начале этого века скорости интернета все-таки были еще не слишком большие. В то же время я попробовал анимацию научных графиков. Пример такой анимации можно посмотреть тут [4].

Особенность интернета в том, что код любого сайта доступен и открыт. Я не знаю есть ли способ его закрыть. Ведь код -- это просто текст, который интерпретирует браузер, программа, которая стоит на компьютере пользователя. И вот этот код сначала скачивается на компьютер пользователя, а потом исполняется. И если код уже есть на компьютере пользователя, то как можно его спрятать от пользователя. Ведь администратор имеет полный доступ ко всему на компьютере. Поэтому прятать не стали и сам браузер по требованию показывает этот код. И в такой ситуации любой сайт является образцом и примером как можно сделать такой же сайт и с такими же эффектами, но с другими данными (текстами, картинками).

Программы создания сайтов

Следует сказать, что одновременно с написанием программ анимации на языке JSHC (то есть JS+HTML+CSS) я также пробовал писать анимации на своем языке ACL, используя возможности Java. Такие анимации не работали в интернете, но они работали на компьютере и кое-какие алгоритмы было проще проверить на ACL, чем в браузере. И вот кажется (уже не помню точно) я впервые именно на ACL стал писать программы, которые как бы сами создавали полностью готовые сайты по небольшому набору входных данных. Такие программы вообще не требовали от пользователя знания языка JSHC. Достаточно было прочитать описание программы, узнать что она просит и дать ей это. Остальное программа делала сама и на выходе получался готовый сайт.

А потом, я стал создавать такие же программы и на самом языке JSHC, то есть сайт имел окно редактора, куда надо было скопировать один текст и получить в нем же другой текст, который можно было обратно скопировать в окно редактора, а потом в файл. Первый такой сайт [5] задал внешний вид всем последующим версиям. То есть окно редактора, три кнопки [Help] [Input] [Execute] и краткая аннотация. После создания текста сайта и показа его в окне программа сразу показывала сам сайт в отдельном окне браузера. Это было необходимо по той причине, что входные данные могли быть не вполне оптимальные и только на результате видно как их исправить.

Первая программа называется WebAnimA. Она имеет очень много возможностей, но и входные данные также очень сложные и их много. И готовить такие данные достаточно трудоемко, а те возможности, какие у программы были, не так уж и часто использовались. Кроме того, появились новые идеи и новые методы программирования. И поэтому я, не трогая первую программу, сделал вторую программу [6], которая называется WebAnimB. Она имеет точно такой же внешний вид, но немного другую функциональность. Как следует из ее описания, она не делает готовый сайт, а создает модуль, который может быть размещен на сайте вместе с другим содержанием. Иногда это бывает необходимо. Интересно, что как первую, так и вторую программу, я разместил не на своем основном сайте, а на своем научном сайте, уже даже не помню почему. Обе они были написаны в 2011 году, то есть 10 лет назад.

Но и на этом дело не закончилось. Через 6 лет появилась третья версия программы [7], которая, естественно, называется WebAnimC, и в ней был учтен опыт работы за прошедшие годы. То есть входные данные упростились, переходы между кадрами были зафиксированы и их описывать уже можно было не описывать, появились новые и более удобные кнопки управления показом и много чего еще. Внешний вид сайта не изменился, сайт появился уже на моем личном сайте и только размеры окон и текста чуть увеличились, так как у меня уже был ноутбук с более высоким разрешением. Эта версия программы является окончательной до настоящего времени. Повторилась история языков программирования A, B и C. Языки A и B уже никто не помнит, а язык С жив до сих пор. Мои программы A и B до сих пор живы и их можно использовать.

Но, разумеется, я не перестал продолжать разработку разных программ создания сайтов под ключ. Просто к этому времени созрела идея создания более сложной программы, которая не просто делает сайт с каким-то одним объектом, а создает сайт, в котором есть много самых разных объектов. Какие объекты могут быть? Ну, разумеется, Заголовок, названия разделов, подразделов, текст, ссылки, картинки, картинки со ссылками, тексты разных фасонов, таблицы и разные анимации. К тому времени, у меня появилась программа анимации в виде книги. Это была первая программа, которую я сам не писал, а увидел на сайте, скопировал себе код и переделал его так, как мне лично нравится. Я не стал делать программу для такого сайта, а просто написал статью [8], как это можно сделать по образцу. Также я научился кодировать шаблоны разных меню и сайтов по набору входных даных.

Такую программу я первоначально написал на своем языке ACL, так мне было проще. В списке готовых ACL программ интерпретатора vkACL [9] она первоначально называлась (txt>htm) потому что ее входным потоком был текстовый файл специальным образом размеченный, причем разметка коротко записывалась и была небольшая. А на выходе получался htm файл (вэб сайт) весьма сложного вида. Сейчас программа (txt>htm) уже имеет собственное меню из 5 пунктов и программа, о которой идет речь, имеет второе место в этом меню. И только через некоторое время я решил сделать копию этой программы онлайн на языке JSHC. На языке ACL есть возможность делать замены любой комбинации символов на любую другую прямо в файлах. В языке JSHC тоже есть такая возможность, но она реализуется по другому, через регулярные выражения, которые я никак не хотел учить, но пришлось. Вот ссылка на программу [10].

Фокус в том, что лично мне эта программа не нужна. Она просто копирует работу ACL программы, и может быть полезной тем, у кого нет vkACL, и он не хочет ее скачивать, так как боится в ней разбираться. За много лет я насмотрелся на людей. Многие из них, не очень то стараются узнать что-то новое, просто живут как тараканы, делая одно и то же каждый день. Наверное так было всегда, людей, которых интересует что-то новое, очень мало, но этого было достаточно для медленного развития. Сейчас узнать новое стало профессией, за это платят зарплату, но все равно, очень много людей даром ничего делать не будут. Тем, кто что-то делает не ради денег, а потому что интересно, приходится жить в одиночестве, без понимания со стороны окружающих, которые считают их дураками. Но эти симпатии взаимные. И есть еще принцип -- не обманешь, не продашь. Так вот онлайн вариант для многих выглядит безопаснее и проще, хотя все как раз наоборот.

Слайд-шоу Презентации

Как я уже сказал, ACL программа (txt>htm) получила дальнейшее развитие, но это произошло относительно недавно и аналогов в виде онлайн программ пока нет. Со временем я стал разделять слайд-шоу на два типа. Первый тип я стал называть фото-шоу, а второй остался со старым названием. В чем различия? Фото-шоу показывают картинки динамично и под музыку. Это получается как бы аналог примитивного немого кино. И красивые картинки так, действительно, приятно смотреть. Но есть еще презентации, то есть набор картинок, которые показываются на докладах, и которые надо комментировать. Тут как бы совсем другой подход. Динамика не нужна. Нужно перелистывать картинки одну за другой, или искать из таблицы, и про каждую рассказывать какое-то время. Или иметь возможность показать комментарий.

И я стал делать отдельно программы для работы с картинками в режиме презентации. Были разные версии, о которых нет смысла и говорить. Впрочем про одну старую версию все же стоит сказать. Она была непосредственной предшественницей окончательной версии, хотя в чем то ее даже превосходила. Это было слайд-шоу презентации с комментариями и анимациями. Она была рассчитана на слайды с аспектным отношением 4/3 при том, что аспектное отношение экрана ноутбука больше, например, 16/9. При этом справа остается место и вот туда были поставлены 8 кнопок и окно для комментариев. Статья о таком варианте была написана тут [11].

Фокус состоял в том, что в этом варианте к каждому слайду можно было прицепить анимацию по серии картинок, которая запускалась по одной кнопке, и анимацию на другом сайте (ссылку на сайт), которая запускалась по другой кнопке. Соответственно, нужно было готовить входные данные для этих анимаций. Но это редко использовалось. На практике я так ни разу и не воспользовался такой возможностью. А писать про то как все это надо приготовить приходилось. Уж если я сам не пользовался, то другие и точно не будут. Точнее я конечно все это приготовил и программу проверил в работе. Все выглядело отлично. И вариант такой существует.

В то время я не думал о других приборах. И когда вдруг решил посмотреть как это выглядит на планшете под Виндовс с другим аспектным отношением, то оказалось, что кнопки залезают на картинку и все совсем не так хорошо, как казалось на рабочем ноутбуке. В принципе это поправимо и это было сделано в следующих версиях. Я повернул таблицу кнопок вертикально, а окно сообщения наложил поверх картинки. Соответственно оно убиралось и возникало по требованию. Таблицу кнопок я сделал так, что она никогда не может наползти на картинку, но может выйти за размеры экрана. Тогда возникает линейка прокрутки, картинка с кнопками шире экрана, и кнопки можно видеть при смещении картинки влево.

В конце концов я отказался от этих анимаций и сделал JS программу и образец сайта на ее основе, про которые написал статью тут [12]. Это вполне рабочая версия и у нее есть свои плюсы в том плане, что это первая программа, которая была сделана с масштабированием на окно браузера, и только если окно имеет ширину экрана, то и на весь экран. Это особенно важно при работе на новых приборах типа планшет или смартфон. Старые анимации (фото-шоу) там тоже работали, но кнопки были не того размера и не так сделаны. В этом варианте кнопки были сделаны картинками, а не текстом и это гарантировало их размер на всех приборах.

Фокус этой программы был в том, что она автоматически готовила таблицу иконок всех слайдов в самом начале, причем после скачивания реальных слайдов. Это занимало какое-то время, зато потом все работало без задержек, так как все картинки были в кэше браузера и загружались быстро. А у программ анимации при медленном интернете в первый проход всегда были сбои, не все картинки показывались и приходилось это терпеть. Только при втором проходе все работало как надо. Здесь же первый проход делался при составлении таблицы иконок. И я решил добавить к этой программе анимацию по слайдам, как в фото-шоу, пусть без переходов, но все равно интересно. Такая анимация не тормозит и нормально работает. Я сделал новую программу, у которой был такой же внешний вид и такие же кнопки, только они уже имели другие функции.

Образец новой программы я приготовил и дал ссылку на него в статье о программе тут [13]. Это получился как бы объединенный вариант. Тут можно показывать как презентацию, так и анимацию, причем при включении анимации на экране появляется проигрыватель музыки, который в обычном режиме не видно. Кнопки дублируются клавишами с такими же буквами плюс клавиши стрелки. Эту версию я дважды использовал в реальном докладе онлайн, через Зум. Второй раз что-то пошло не так, кнопки исчезли и пришлось работать только с клавиатурой. Все прошло нормально, но осадок остался.

И я решил сделать еще один вариант, совсем без кнопок, когда кнопками являются разные части самой картинки. В программе на ACL это очень просто делается. Программа возвращает координаты клика на картинке и их можно использовать для принятия решения о том, что и как делать. В JSHC тоже есть такая возможность, только она оформлена более сложно. Нужно в явном виде указать координаты области для клика и свойства этой области. И если областей 100, то все 100 и надо указать. Но вот тут как раз JS спасает, потому что все эти указания можно запрограммировать и они будут указаны в цикле и автоматически.

Я сделал и такой вариант буквально только что, за несколько дней до написания данной статьи. Пока есть только первый вариант, в котором 4 кнопки, а не 8, как было раньше. Просто картинка поделена на 4 части, то есть четверти при каждом угле. Можно двигаться вперед, назад, показывать таблицу и комментарий к каждой картинке. Таблица готовится в виде картинки по всем слайдам сразу. Я уже делал такую программу на ACL. И как раз на ACL есть программы, которые такую таблицу способны делать. Это снова слайд-шоу с комментариями, но без кнопок. Сайт про эту программу тут [14].

Результаты работ

У меня накопилось очень много фотографий уже в цифровом виде, а также есть очень много фотографий на бумаге. Бумажные все еще ждут своего часа, а вот цифровые я как раз использовал для создания альбомов с помощью указанных программ. Фотографии закачивались в интернет разными способами, и затем оставалось приготовить входные данные и подключить нужную программу. По мере написания новых программ я переделывал альбомы на новую программу, так что есть примеры не для всех программ, а только для последних.

Ссылки на готовые альбомы я собирал в специальные списки в достаточно красивой форме с иконками и подписями. Вот тут [15] собраны ссылки на фото-шоу с музыкой по моим фотографиям, сделанные с помощью программы WebAnimC. Базовый размер фотографий 800*600, но их можно увеличивать хоть на весь экран. А тут [16] собраны альбомы с презентациями по моим фотографиям, сделанные по программе [13]. Их больше, потому что используются как старые фотографии (те же самые альбомы), так и новые, для которых я фото-шоу по программе WebAnimC делать не стал.

Программа [13] тоже может показать анимацию под музыку и она лучше в том плане, что не тормозит с самого начала. Точнее анимация не тормозит, а сама программа в самом начале тормозит и видно как появляются иконки одна за другой. Просто анимация запускается тогда, когда все фотки уже в кэше и интернет не нужен. Кроме альбомов по своим фотографиям я еще делал альбомы по чужим фотографиям. Я их выделил в отдельные списки для фото-шоу [17] и для презентаций [18].

Наконец, есть небольшой список анимаций в виде книги. Для таких анимаций более удобны вертикальные фотографии. Свои (точнее жены) фотографии я резал пополам, чужие были вертикальные с самого начала. В будущем, возможно таких анимаций будет больше. У них остались проблемы с предварительной загрузкой. Также комментарии и музыку приходится ставить под книгой и сайт получается большим, не влезает на экран. Но все равно они очень интересные.

В заключение хочу сказать, что онлайн научные программы я тоже сделал. И некоторые из них весьма полезны. Но с ними больше проблем и не любую программу можно сделать без файлов. Да и не всегда это разумно. Но наука -- это очень специфическая область. Порой даже ученые не понимают друг друга, а людям без подготовки невозможно ничего объяснить. С другой стороны, у меня есть также программы анимации простых перемещений разных объектов с учетом их взаимодействия с препятствиями. Эти программы интересны тем, что они не используют готовые картинки вообще. Они их создают динамически, показывают и сразу стирают. И они это могут делать с очень большой скоростью. Вот ссылка на список таких программ [20].

Кое что еще

Через много лет я заметил у себя еще одну статью, которую я на сайт закачал, но ссылки нигде нет. В ней обсуждается вопрос о проблеме разных браузеров. С тех пор много воды утекло, но я все же решил дать на нее ссылку. Со временем проверю как теперь все работает. Вот эта ссылка [21].

.