1 (изменено: gudleifr, 2018-11-17 19:43:20)

Тема: JS: Откуда начинать копать?

SiPoS пишет:

Не шарю в области скриптов и т.д.

Не, в скриптах я, может, и шарю, но меня совершенно подавляет обилие (новых) технологий. Столкнулся с JavaScript после того, как моя старая страничка подохла, и вместо прекрасно работающих ftp, ssh и perl скриптов я вдруг оказался гордым обладателем убогого форума.

Что изменилось при переносе странички в формат форума?

Попытка переносить темы "один в один":
1) Практически полная потеря управления выложенными материалами. Все каталоги и справочники приходится хранить "где-то рядом" (т.е., практически "на бумажке"). Средства синхронизации и, даже просто поиска по форуму (да-да, местный рецепт использования кнопки "поиск" начинается словами: "достаньте где-нибудь модуль поиска") перенеслись в далекую перспективу.
2) Картинки приходится подгружать руками через сторонний ресурс, который, как и все подобные ресурсы, может взмахнуть ушами в любой момент.
3) Все мои серверные Perl- и C-скрипты придется переписывать как клиентские, на самом дегенеративном из известных мне языков - JavaScript. На нем нельзя "писать то, что надо сделать", но можно только "создавать объекты, похожие на те, что делают что-то подобное" ("Сложите из букв Ж, О, П, А слово СЧАСТЬЕ!"). Когда я этим займусь - неведомо.

Зато, почтовый сервер расщедрился и дал мне облако аж на 100Гб. Можно хранить что попало (чем я и воспользовался, заменяя мои OCR-ы отдельных статеек полными экземплярами книг и журналов).
4) Доступ к этим документам получился жутко неудобным - надо кликать на промежуточные экраны/диалоги. Причем, некоторые типы документов без спросу сразу загружаются в просмотрщик, нагружая трафик, хотя об этом их никто не просил.
5) Еще неприятнее, что доступ к "облачным ссылкам" доступен только просветленным обладателям последних версий браузеров.

В конце концов, я нашел "черный ход" - форум великодушно разрешил мне создавать свои HTML-странички. Немножко и совсем маленькие. Поэтому хотелось бы подгружать данные в них откуда-то извне. Из "облака" не получится (по причине #4). Остается сервер картинок. К счастью, GIF-формат позволяет хранить в своих блоках гораздо больше, чем одна или несколько картинок. При этом он остается вполне пригодным для хранения на картиночном сервере. Возможность упаковки в одну "картинку" целого документа частично решает и проблему #2 - восстанавливать вылетевшее большими кусками все-таки проще.
Остается только научить свой браузер не тупо выводить картинки на экран, но скачивать куда-то внутрь себя, а потом рисовать то, что нужно. При этом мы по полной огребаем по причинам проблем #3 и #5, но что-то можно получить.

Как я это делал, описал в "заметках": http://gudleifr.forum2x2.ru/t70-topic#861

...

Там я столкнулся с тем, что на JavaScript нельзя просто "взять и написать". Любую фигульку нужно долго гуглить и потом дорабатывать напильником. Мои двадцать строчек скрипта моментально превратились в двести:

Итак, (написанная ранее) программа, из которой я буду делать JavaScript просмотрщик базы данных, состоит из плясок с бубном вокруг пяти интерфейсов:
1. XMLHttpRequest - открытие файла для чтения.
2. DataView - работы с байтовым массивом.
3. data:image/gif;base64 - вывода картинки прямо из текста.
4. base64 - перекодировки байтов картинки в этот формат.
5. Свойства объекта document - формирование нового содержимого документа.

Для просмотрщика (3) и (4) пока не нужны. Отрезаю. Вместо них вставляю
6. Самописный перекодировщик байтов из файла в кодировку utf-8.

Ну, пока можно остановиться и переписать на JavaScript, то, что мы писали на BASIC.
Конечно, после каждой новой строки перевыводил HTML для проверки. Стоило изменить зараз несколько строк, все падало замертво, и приходилось откатывать назад.
Попытался, заодно, почитать книжку по JavaScript, но меня быстро вытошнило.

Пришлось вспомнить как рисовать в HTML деревья:
7. Всякие style, onmouseover, onclick и прочая фигня (когда-то очень давно выломал из какой-то гостевой).

Вроде, дерево грузится. Можно грузить остальной HTML-обвес.
8. Все делаю самым простым способом - HTML-рамочками.

Макросы, таблицы и картинки пока реализовывать не буду (хотя, все, что для этого нужно, уже есть).

Осталось самое последнее - засунуть всю базу данных в GIF-формат. К сожалению в процессе обнаружилось, что хранилище картинок, которое на халяву прицеплено к моему форуму, не жрет GIF-ы более 1Mb.
9. Пока шифровать не буду, поэтому нужен только сам GIF-формат.

И что? Мы видим, что одно только перечисление технологий, нужных для встраивания программы в нашу операционную систему, весит столько же, сколько сама программа.

...

И что я изначально делал неправильно?
Ведь, дело не в том, что я не могу найти книжку "по XMLHttpRequest", но я не знаю заранее, что именно он мне нужен. Какая связь между тем, что мне надо от браузера и тем, откуда надо начинать копать? Где можно найти меню подходящих технологий?

2

Re: JS: Откуда начинать копать?

gudleifr, к чему вся эта портянка?

3

Re: JS: Откуда начинать копать?

alexii пишет:

к чему вся эта портянка?

Она объясняет суть вопроса, вынесенного в заголовок.

4

Re: JS: Откуда начинать копать?

gudleifr, это вы так свой форум пытаетесь разрекламировать?

5 (изменено: gudleifr, 2018-11-17 02:43:57)

Re: JS: Откуда начинать копать?

Malcev пишет:

это вы так свой форум пытаетесь разрекламировать?

Нет.

+ открыть спойлер

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

6 (изменено: gudleifr, 2018-11-20 14:35:26)

Re: JS: Откуда начинать копать?

Попробую пояснить на примере.

Когда я начал фигачить свою страничку в Сети (в конце прошлого века), то практически ничего не знал о том, как это делается. Т.е. мне сказали, что надо поставить Linux (в те модемные времена без нее в Сети было делать нечего) и все... С трудом и перекомпиляцией ядра кое-как научился тыкаться в http и ftp. Хорошо, попалась книжка по Perl-CGI, в которой были не только примеры скриптов, но и тайное знание о том, что все это фигня, и того, что я нарыл в nix'-ах, http и ftp достаточно! Т.е. сам Perl не важен! Все эти модули для "удобного форматирования html", стили, паттерны и прочая фигня - лишь бантик на паровозе, который может быть, а может и не быть. Скоро я добавил в копилку ssh и начал заменять Perl-скрипты на честные C-программы. Конечно под nix'-ы есть куча удобных языков и утилит для работы в Сети. Но, зная основы, я смог сделать то, что мне нужно малой кровью, по мере надобности доучивая необходимое по ходу дела. И этими основами оказались общие принципы nix'-ов и кое-какие огрызки протоколов http, ftp, ssh...

А, вот, на стороне браузера, я этих "основ" не нашел. Только набор JS-рецептов, работой которых совершенно невозможно управлять. Что нужно знать? Выучить стандарты ActiveX/COM? Стандарты совместимости? Или уже появился какой-нибудь "обще-браузерный" стандарт подгрузки/выгрузки необходимых модулей? Кто, куда и в каком случае хреначит это JQuery/AJAX  непотребство?

Как понять этот сленг:
"Что такое AJAX я думаю рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы..."?
Какая связь между "реализацией непонятно-чего", которая "упростилась в разы", и поэтому "не стоит рассказывать, что такое AJAX?" Что такое они хотели делать со страницей на клиентской стороне, что требуется "перезагрузка страниц целиком?"
Где объяснение этих технологий для инженера, а не для быдлокодера?

7

Re: JS: Откуда начинать копать?

Очень упрощённо: AJAX — технология, которая позволяет выполнять скриптам из html-страницы браузера клиента дополнительные запросы к серверу без перезагрузки страницы. В настоящее время используется повсеместно (и далеко не всегда по делу).

gudleifr пишет:

Где объяснение этих технологий для инженера, а не для быдлокодера?

Здесь: AJAX — Википедия, читать первый раздел «Сравнение стандартного подхода и AJAX».

8

Re: JS: Откуда начинать копать?

alexii пишет:

Здесь:

Да, там есть полезный огрызок. И для полного "иженерного понимания" таких огрызков надо собрать +100500 штук. А, если искать не огрызки, а  нормальную документацию, то можно, вероятно, обойтись тремя страничками...
Например, из материала статьи следует, что AJAX можно смело выбрасывать, если знаешь, как работают "XMLHttpRequest... динамическое создание дочерних фреймов,.. динамическое создание тега <script>... динамическое создание тега <img>, DHTML". А копнув их, и там найдешь кучу ненужной шелухи...

9

Re: JS: Откуда начинать копать?

gudleifr, не следует. AJAX — это и есть XMLHttpRequest.

10

Re: JS: Откуда начинать копать?

Очень много слов от непонимания. С чем-то разобрались, что-то поняли и можете с этим работать. С другим не разбирались или не получается. Нормальная ситуация, когда пытаешься охватить всё, а вголове -- путаница.

К слову. AJAX -- это технология. XMLHttpRequest -- это реализация технологии.

Почитайте:
https://www.w3schools.com/
http://htmlbook.ru/
https://javascript.ru/

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

( 2 * b ) || ! ( 2 * b )

11 (изменено: gudleifr, 2018-11-21 12:23:03)

Re: JS: Откуда начинать копать?

alexii пишет:

AJAX — это и есть XMLHttpRequest.

Нашел следующие краткие сведения:
"СЕПУЛЬКИ - важный элемент цивилизации ардритов (см.) с планеты Энтеропия (см.). См. СЕПУЛЬКАРИИ".
Я последовал этому совету и прочел:
"СЕПУЛЬКАРИИ - устройства для сепуления (см.)".
Я поискал "Сепуление"; там значилось:
"СЕПУЛЕНИЕ - занятие ардритов (см.) с планеты Энтеропия (см.). См. СЕПУЛЬКИ".

Например, вспомним канонический скриптовый http-пример:

# getquotes.tcl: биржевые курсы для Lucent, AT&T, Microsoft
set so [socket quote.yahoo.com 80];	# соединение с сервером
set q "/d/quotes.csv?s=LU+T+MSFT&f=sl1d1t1c1ohgv"
puts $so "GET $q HTTP/1.0\n\n";	# послать запрос
flush $so
puts [read $so];	# read & print reply

1. Что в таком случае означает "без полной перезагрузки страницы"? Что я не весь файл, а только до того места, которое мне надо? Или умный хостинг поддерживает свою внутреннюю индексацию внутри файла и я могу в обращении GET уточнить, какой фрагмент мне нужен? Или, все-таки" нас просто дурят, и файл грузится целиком, но "страница браузера" состоит из нескольких http-файлов и вся "экономия" сводится к тому, что браузер умеет перезапрашивать только те файлы, что просят?

2. Понятно, что XMLHttpReques - это просто обертка для обычной файловой операции. Так каким местом он цепляется к браузерам? Ведь браузер-то умеет обращаться к http, только нам не дает. Его операции имеют общую основу с XMLHttpRequest и в XMLHttpRequest просто добавлены избыточные проверки? Или он реализован неким надсистемным образом на основе неких внешних стандартов? Как выяснить возможности XMLHttpRequest во взятой наугад версии браузера?

3. И, наконец, при чем тут AJAX?

P.S. Надеюсь из этих (риторических?) вопросов понятно, что я просто не знаю "правил игры". И настоящий вопрос звучит: "Где узнать правила?"

12 (изменено: gudleifr, 2018-11-21 12:35:28)

Re: JS: Откуда начинать копать?

Rumata пишет:

К слову. AJAX -- это технология. XMLHttpRequest -- это реализация технологии.

См. выше про сепульки. Меня не интересуют "энергичные слова", меня интересуют работоспособные API и их описания.
Поэтому, кстати, все эти "обо всем", которые Вы перечислили, можно смело отправлять в помойку. Они специально придуманы для того, чтобы создать уверенность, что все понятно, при этом не сказав ничего путного.

Rumata пишет:

Очень много слов от непонимания. С чем-то разобрались, что-то поняли и можете с этим работать. С другим не разбирались или не получается. Нормальная ситуация, когда пытаешься охватить всё, а вголове -- путаница.

Именно. За исключением одного. Мне не нужно "все". Мне нужен путеводитель по поиску во "всем" той крупицы полезного, что мне нужна в конкретный момент. И единственным "путеводителем", который я могу себе представить, является "понимание внутренних принципов". Которого нет ни по одному из представленных Вами адресов.

Rumata пишет:

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

Вот это точно фигня. Javascript сам ничего не умеет и сугубо бесполезен без "фреймворков и библиотек" (см. первый пост).

13

Re: JS: Откуда начинать копать?

gudleifr пишет:

можно смело отправлять в помойку

Хорошо.

( 2 * b ) || ! ( 2 * b )

14

Re: JS: Откуда начинать копать?

Rumata пишет:

Хорошо.

Плохо.

Нам дали самый дебильный из языков:
1. Зачем-то его сделали объектно-ориентированным. Им, что, было мало HTML-объектов?
2. На нем нельзя "просто взять и написать", надо искать объекты, которые "делают примерно то, что надо".
3. Зависимость от версий браузеров доставляет нещадно.

Вместо понимания "что собственно делаем":
4. Количество "технологий", которые нужно прицепить к простейшему коду для его выкладывания в Сеть, зашкаливает.

А при обсуждении на форумах (этот не первый):
5. Бомонд может обсуждать только "кубические объекты в вакууме", но не смысл написанного.

15

Re: JS: Откуда начинать копать?

На все ваши вопросы по ajax, вы можете найти информацию тут:
https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX
По поводу получения ответа от сервера частями, сервер должен поддерживать Accept-Ranges.

16

Re: JS: Откуда начинать копать?

Malcev пишет:

На все ваши вопросы по ajax, вы можете найти информацию тут:

Могу. А могу и не найти.... Потому, что искать не буду.
Если Вы посмотрите тему, то увидите, что AJAX впервые здесь встретился, как пример "бессмысленной технологии", которая "упростила в разы реализацию непонятно-чего". Примеров таких технологий уже в первом посте - десяток. Вопрос лишь в том, что реально скрывается за этими "технологиями". И как можно понять эту суть не копаясь в мусоре "ответов на все ваши вопросы".

17

Re: JS: Откуда начинать копать?

gudleifr пишет:

Вопрос лишь в том, что реально скрывается за этими "технологиями

Наберите в гугле advantages and disadvantages of Ajax.
А так ваше построение беседы смахивает на троллинг, который правилами форума запрещен.

18 (изменено: gudleifr, 2018-11-21 15:48:37)

Re: JS: Откуда начинать копать?

Malcev пишет:

А так ваше построение беседы смахивает на троллинг

Возможно. Поэтому просто повторю вопрос из первого поста: "Какая связь между тем, что мне надо от браузера, и тем, откуда надо начинать копать?"

+ открыть спойлер

Я понимаю так (возможно, совершенно неправильно):
1. Браузер качает файлы из Сети и распихивает их по буферам/кэшам...
2. Распарсив содержимое этих буферов, браузер получает дерево блоков/контейнеров...
3. Содержимое этих блоков переводится в набор интерфейсных объектов, которые отображаются на экране...
4. Существует некоторая логика взаимодействия этих уровней... Как сверху вниз, так и снизу вверх...
5. Возможно, существует еще куча уровней, о которых я не знаю.

JavaScript обеспечивает нам доступ к каким-то из этих буферов/блоков/объектов... реже - операциям этих уровней...

Допустим, есть ф-ия XMLHttpRequest. Из ее быдло-описания можно подумать, что она относится к уровню (1). Но так ли это? Может она сначала обрабатывается в (4)? Или даже на время ее действия создается некий "безопасный" (1')? Но, ведь я даже не знаю, насколько схема (1-4) соответствует реальности. Я не знаю, насколько по-разному она реализуется в разных браузерах/версиях.
И так - для всех JS-функций, которые я вынужден использовать. Более того, используя одну из них (погуглив), я никоим образом не имею доступа к ее "родственным функциям". Просто по тому, что у меня нет никакого критерия этого родства.

19

Re: JS: Откуда начинать копать?

То есть, вы хотите понять алгоритм работы броузера?
Тогда тут:
https://habr.com/post/174057

20

Re: JS: Откуда начинать копать?

Malcev пишет:

Тогда тут:

Спасибо. Но это опять огрызок. Если взять схему из-под спойлера в предыдущем посте - это только уровень (2) (и немножко - (3)). Без логики и динамики.

21

Re: JS: Откуда начинать копать?

Я бы делал так.
Гуглил XMLHttpRequest browser server model, после чего выходил бы на график, показывающий логику работы ajax.
http://www.cs.rahnama.af/slides/ajax.pdf
Анализировал бы его, делал бы вывод - нужна ли мне эта технология или нет.
В зависимости от решения изучал бы XMLHttpRequest, либо пропускал и шёл дальше.
Если же у вас задача написать свой броузер с нуля, то, наверное, лучше смотреть исходники каких-нибудь ненавороченных броузеров вкупе с изучением w3.org.

22

Re: JS: Откуда начинать копать?

Malcev пишет:

Я бы делал так.

Я делал иначе. Я тупо начал гуглить "Как подгрузить сырой файл", "Как перехватить загруженный файл", "Как скачать без отображения" и т.п. Поймал практически все упомянутое выше: "динамическое создание дочерних фреймов,.. динамическое создание тега <script>... динамическое создание тега <img>, DHTML", и наконец, единственное приемлемое: "XMLHttpRequest".

Но если бы я видел "схему (1-4)" из поста #18, хватило бы одного тыка - "Функции JS для работы с буферами/ф-иями уровня (1). Можно всех посмотреть?". И не надо никаких танцев с бубном: "Поймай неуловимый AJAX и бей его по морде чайником, пока он не сделает примерно то, что тебе надо, по цене полета на Марс".

23

Re: JS: Откуда начинать копать?

gudleifr пишет:

Например, вспомним канонический скриптовый http-пример:

Ничего не могу сказать по Вашему примеру, поскольку не знаком с языком из приведённого кода.

gudleifr пишет:

1. Что в таком случае означает "без полной перезагрузки страницы"?

Это означает, что url остаётся прежним, адрес не меняется.

gudleifr пишет:

Что я не весь файл, а только до того места, которое мне надо?

А причём тут «файл» и «хостинг»? Браузер общается с Web-сервером, и знать ничего не знает ни про какие файлы и хостинги.

gudleifr пишет:

Или умный хостинг поддерживает свою внутреннюю индексацию внутри файла

Нет.

gudleifr пишет:

и я могу в обращении GET уточнить, какой фрагмент мне нужен?

См. выше ответ коллеги Malcev про Accept-Ranges.

gudleifr пишет:

2. Понятно, что XMLHttpReques - это просто обертка для обычной файловой операции.

Нет.

gudleifr пишет:

1. Браузер качает файлы из Сети …

Нет. Вообще забудьте про файлы. Не существует такого понятия в http-общении между клиентом и сервером. Совсем не существует.

gudleifr пишет:

Я делал иначе. Я тупо начал гуглить "Как подгрузить сырой файл", "Как перехватить загруженный файл", "Как скачать без отображения" и т.п.

Вот от этих «файлов» у Вас и пошёл кавардак в голове. Забудьте про файлы. Браузер и web-сервер обмениваются текстом и только текстом.

Я понимаю, что проблема в том, что нужно знать слишком много технологий одновременно (если что — коллеги добавят): HTML, http, vbscript/jscript/javascript, DOM и DHTML, xml, И только потом можно приниматься за AJAX.

24 (изменено: gudleifr, 2018-11-22 12:37:10)

Re: JS: Откуда начинать копать?

alexii пишет:

...

Именно это я имел в виду. В отсутствие основополагающих знаний, мы можем сколько угодно спорить о advantages и disadvantages "технологий", вся суть которых сводится к просто "читаю/пишу файл".

Более того, как и AJAX, вопрос "файловой ориентации" браузеров к теме отношения не имеет.

25

Re: JS: Откуда начинать копать?

gudleifr, коллега, повторяю в последний раз — не сводится.