Привет!
Все старожили тут уже наверняка уже юзают такое, хотя мож кто и не пользуется выводом в хтмыл, на всякий пожарный выкладываю.
Что позволяет библиотека HTML5.js?
- Задавая всего с десяток параметров в Кликерманне, можно настроить под себя удобный графический вывод в HTML-файл, не отказывая себе и в возможности использовать сценарии JavaScript. Разумеется, каждый раз вводить все параметры не обязательно: можно настроить их один раз и затем использовать шаблон, периодически меняя под свои нужды пару-тройку папаметров.
- Можно делать всё то же, что и в формах отправки сообщения на форумах, в соцсетях, мессенджерах: использовать теги, напоминающие bb-codes или markdown, позволяющие форматировать выводимые сообщения -- делать заголовки, выделять жирным шрифтов или курсивом, менять цвет текста/ его размер/ используемый шрифт, делать выравнивание, добавлять картинки, запускать видео, и всё прочее, что вы видели в современном браузере.
- На ВиндовсХР скрипт не тестировался, но предполагаю, что должен работать, возможно придётся внести мелкие правки в исходник, ввиду старого ИЕ в составе хрюши.
- Используем хтмл-код прямо внутри скриптов Кликерманн! И всё это в перемешку с обычным текстом, джаваскриптом и стилями css3, причём никто не заставляет вас использовать это в обязательном порядке: если вы не понимаете html, можно писать просто обычным текстом и скрипт будет выводить это в настраиваемом окошке браузера!
- Используйте расширенные юникод-символы (более 120 тысяч символов, из них 80 процентов иероглифов), а в Хроме это также и цветные эмоджи/ смайлы (около 1000 шт.)
- Назначайте на ходу стили уже присвоенным классам элементов и управляйте джаваскрипт-сценариями через id и библиотеку jQuery
- При необходимости подключайте свои произвольные джавскриптовые библиотеки и фреймворки (наподобе Angular.JS, к примеру для создания одностраничных SPA-приложений), многие из них отлично подходят для визуализации в браузере (Three.js, Vue.js и многие др.) и просмотра картинок без обновления страницы
- Не забывайте и про мощные встроенные во все современные браузеры технологии визуализации, такие как HTML5Canvas, WebGL, SVG, на которых можно хорошо рисовать векторную графику/ фигуры/сцены и которые поддерживают скриптование прямо из вашего джаваскрипта! Встраивать в них можно и растр, и видео.
- ДжаваСкрипт покорил и серверное ПО (помним Node.js, сервера от Нетскейпа и Мелкософта на js)), и десктопы (та же нода, Phantom.js, NPM)
- Можете единожды настроить шаблон для использования этой библиотечки, скопировать его себе куда-то и затем уже сразу юзать готовый образец из сохранёнки, чтобы не изобретать каждый раз по велосипеду
- Если вы используете старую ОСь вроде WinXP, то наверняка оченб многие символы из диапазона UTF у вас не отобразятся (BabelMap и PopChar вам в помощь)
- В языке JS есть свои инструкции для вызова диалоговых окон с вопросами к пользователю, а в её подлибе джейКвери всё ещё веселее
- Кроме возможностей JavaScript/ECMA, у нас есть новый DOM и обширный репертуар html 5-ого: веб-сокеты для дуплекс-связи, воркеры-потоки, StorageAPI, новые муьтимедиа-теги <video> и <audio> для воспроизведения прямо в браузере без поддержки каких-либо плагинов! Спасибочки whattg, прощай трайдент
- А если вы ещё поднимите и локальный веб-сервер, то вам не хватает только своего пакетного менеджера с SOAP-блекджеком и балансером нагрузки
- Кликерманном можно динамически менять не только хтмл, но и сами сценарии, поскольку это по сути тоже обычные текстовые файлы (что можно сказать и о подключаемых таблицах стилей). Графику также можно хранить в странице inline-ово, используя для этого base64-кодирование с соответствующим mime-типом
Состав пакета библиотеки (спойлер я не нашёл на форуме, будем так писать -- прямым текстом)
- assemb1d.hta -- пример получающегося файла
- html5js.cms -- собственно, сама библиотека, выводящая по умолчанию HTA-файл с удобным, миниатюрным заголовком, без лишних кнопок, меню и статусбаров
- jquery-3.3.1.min.js -- свежайшая версия JavaScript-библиотеки, ускоряюшая ввод js-кода в 2 раза. Здесь запакована minified-версия под десктоп (30 кб), но желающие могут скачать и под мобайл на офсайте (архив тот весит 8 мб со всеми сублибами/ тестами -___-)
- clmn31.ico -- иконка КЛМН (которая в hta под Trident-движком не отображается). Но если вам больше по душе Блинк от ГуглХрома, то тема вполне пригодится
Итак, внешний вид функции/ инклуда/ параметров модуля таков:
html5js (html, title, hdr, file, posX, posY, sizeX, sizeY, bgcolor, fontcolor, ext, clmn-param, script, css3, jQueryLib
При написании в вашем сценарии это может выглядеть как-то так:
html5js("><br>Check it, bro<hr><b>CLMN</b> screens <i>in example</i>", "MyProject", "Results", "assembld", 10, 10, 390, 490, "#FFFFCC","navy", "a", 0, "alert('Clickermann rules!');// confirm('Agreed?');// " ,"" ,0)или в укороченном виде так:
html5js("MyHTML-text", "MyProject", "Results", "assembld", 400, 200, 390, 490, "#ffc","black", "a", 0, ";// ", "", 0)Пробежимся по значениям параметров:
html, title, hdr, file, posX, posY, sizeX, sizeY, bgcolor, fontcolor, ext, clmn-param, script, css3, jQueryLib
| ==Параметр | ==Тип переменной | ==Возможные значения | ==Комментарий |
| html | string | text, html, js, css | Вводите сюда любой текст, который затем будет отображаться на выведенной скриптом веб-страничке. Можно использовать html-разметку |
| title | string | text | Заголовок вашей будущей странички (самая верхняя строка окна) |
| header | string | text | Заголовок первого уровня (крупными буквами) внутри странички |
| filename | string | text | Желаемое название файла веб-приложения |
| Position X-axis | positive number | int, зависит от разрешения монитора и желаемого месторасположения окна | Позиция окна веб-страницы на экране (зазор слева, расстояние в пикселях от левого края монитора). Задаётся джава-скриптом и в браузерах с отключенными скриптами не работает |
| Position Y-axis | pos. num | --"-- (то же самое) | Позиция окна веб-приложения на экране (зазор сверху, расстояние в пикселях от верхнего края монитора) |
| Size X-axis | pos. num | --"-- (зависит от желаемого размера окна) | Размер окна по горизонтали (ширина в пикселях) |
| Size Y-axis | pos. num | --"-- | Размер окна по горизонтали (ширина в пикселях) |
| BackgroundColor | #RRGGBB #rgb htmlEntity | напр., #000000, #FFFFFF, 160 словесных названий цветов (вроде red, green, yellow, black, white, magenta, blue, lightskyblue и т. д.) | Цвет фона страницы, задаётся через внутренние css-стили, также можно использовать и внешний CSS-файл clmn.css |
| FontColor | RGB (тот же тип) | --"-- | Цвет шрифта для основного абзаца с текстом. Для вставки новых абзацев пишите <br> |
| Extension | string | Английские "m" (htMl) или "a" (for web-Application) | Укажите предпочитаемый формат приложения: веб-страница Хрома или приложение с движком от ИЕ (файл .hta) |
| Clickermann parameters | int | 0 или 1 | Бонусная опция для юзеров Кликерманна 4.14+, при включённой опции (для этого ставим 1) в тело веб-страницы выводятся параметры, передаваемые .cms-скрипту, допустим через сценарий в .bat- файле: "C:\your\path\to\Clickermann.exe" "C:\path2\urScript.cms" anyParameters of your choice. В данном случае на странице внизу будет выведено: "anyParameters of your choice" |
| JS script | string | JS code | Размещайте свой джаваскрипт-код в этом параметре, а сами js-инструкции вместо знака ";" разделяйте с помощью трёх знаков: ";//" (после них можно вставлять пробел для лучшей читабельности кода) |
| CSS stylesheet | string | CSS code | Тут может быть ваша реклама css-таблица стилей в inline-формате (понятно, что как в параметре джаваскиптовой всавки кода, так и здесь абзацы по нормам Кликермана не допускаются внутри параметра, также нужно заменить все двойные кавычки " на одинарные ', в т. ч. не забывайте делать это, если вставляете длинный код из других источников, иначе сценарий не загрузится) |
| jQuery library | int | 0 или 1 | Включаем либу джейКвери (ставим в параметре функции единичку) и юзаем быстрые селекторы DOM-модели, аякс/CORS, мощные и гибкие визуальные эффекты для своей веб-странички (перетаскивание, выделение, изменение размеров выбранных объектов налету, сортировка, диалоговые окна, календари, слайдеры, аккордеон/ вкладки на одной странице, обработчики событий, проверка форм, установка флажков и считывание значений установленных пунктов радио-переключателей и т. п.) |
Здесь сам код подключаемой библиотеки:
Для любителей изучать исходники:
|
// 19.02.2019
// Cleoss
//#name "html5js"
sub(js, $jstring)
while (strpos($jstring, ";//")>0)
$divdr = strpos($jstring, ";//")
$newstr=strcut($jstring, 1, $divdr)
tfWrite($htafilename, $newstr)
$jstring=strcut($jstring, $divdr+3, strlen($jstring)-$divdr)
end_cyc
$divdr = strpos($jstring, ";//")
$newstr=strcut($jstring, 1, $divdr)
tfWrite($htafilename, $jstring)
end_sub
// html, title, hdr, file, pos+size, bgcolor+ fontcolor, ext, paramOut, script, css, jQuery
// "html", "title", "hdr", "file", 10, 10, 390, 490, "#FFFFCC", "navy", "a", 0, "alert('Clickermann rules!');//", "", 0
// "><br>Check it, bro<hr><b>CLMN</b> screens <i>in example</i>", "MyProject", "Results", "assembld", 10, 10, 390, 490, "#FFFFCC", "navy", "a", 0, "alert('Clickermann rules!');// confirm('Agreed?');// ", "", 0
// Call the function in this way:
//html5js("><br>Check it, bro<hr><b>CLMN</b> screens <i>in example</i>","MyProject","Results","assembld",10, 10, 390, 490, "#FFFFCC","navy", "a", 0, "alert('Clickermann rules!');// confirm('Agreed?');// ","",0)
sub(html5js,$ht5html,$ht5title,$ht5hdr,$ht5file,$ht5posX,$ht5posY,$ht5sizeX,$ht5sizeY,$ht5bgcolor,$ht5fontcolor,$ht5ext,$ht5par,$ht5script,$ht5css3,$ht5jQueryLib)
// $htmTitle = " Project "
// $header1 ="Results"
// $htmTxt = "><br>Check it, bro<hr><b>CLMN</b> screens: <img src='http://crapware.aidf.org/images/editor.png' alt='clmn' height='300' />"
// $bgcolor ="#FFFFCC" // RGB formats: #ffaacc or #fac or red (second, shortened format is not for IE with its HTA file)
// $fontcolor ="navy"
// $htFiletype ="a" // A - application, M - markable HTML
// $htFiletype=$ht5ext
// $filename="assembld"
// $filename=$ht5file
$wtf = 0.1 // wait some secs
if($ht5file="")
$ht5file="assembld"
end_if
if(($ht5ext="a")|($ht5ext="m"))
//
else
$ht5ext="a"
end_if
$htafilename=strconcat($ht5file, ".ht",$ht5ext)
TFCLEAR ($htafilename)
//logclear
tfWrite($htafilename, "<!DOCTYPE html><html><head><link rel='shortcut icon' href='clmn31.ico' /><title>")
wait($wtf)
if($ht5title="")
tfWrite($htafilename, "🆑 Clickermann APP 💩 (",$htafilename,")")
else
tfWrite($htafilename, strconcat("🆑 ",$ht5title, " - Clickermann APP 💩 (",$htafilename,")"))
end_if
wait($wtf)
$parTx=""
if($ht5par=1)
STRSEPARATE ($_param_str, ";", $pararr)
$parTx=$pararr[2]
end_if
if($ht5jQueryLib=1)
$jQLnk="<script type='text/javascript' src='jquery-3.3.1.min.js'></script>"
else
$jQLnk=""
end_if
tfWrite($htafilename, strconcat("</title><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /><meta charset='utf-8'><script type='text/javascript' src='clmn.js'></script>",$jQLnk,"<link rel='stylesheet' href='clmn.css' type='text/css'><style>.smpl {background-color: #ffe; color: #930; }",$ht5css3,"</style><!-- --><!-- — ☢ <br /> <html lang='en'> --></head><body bgcolor='", $ht5bgcolor, "' id='bd'><font color='", $ht5fontcolor, "'><h1 id='hdr'>", $ht5hdr, "</h1><p id='prgrf'>", $ht5html, "</p></font><textarea id='ta' class='smpl'>Simple sample!</textarea><div id='clmnparam'>",$parTx,"</div><script>"))
wait($wtf)
$jscmd=strconcat("",$ht5script)
if(($ht5sizeX>0)|($ht5sizeY>0))
$jscmd=strconcat($jscmd, "resizeTo(",$ht5sizeX,", ",$ht5sizeY,");// ")
end_if
if(($ht5posX>0)|($ht5posY>0))
$jscmd=strconcat($jscmd, "moveTo(",$ht5posX,", ",$ht5posY,");// ")
end_if
js($jscmd)
wait($wtf)
tfWrite($htafilename, "</script></body></html>")
wait($wtf)
execute($htafilename)
//halt
end_sub
И для любителей копировать:
// 19.02.2019
// Cleoss
//#name "html5js"
sub(js, $jstring)
while (strpos($jstring, ";//")>0)
$divdr = strpos($jstring, ";//")
$newstr=strcut($jstring, 1, $divdr)
tfWrite($htafilename, $newstr)
$jstring=strcut($jstring, $divdr+3, strlen($jstring)-$divdr)
end_cyc
$divdr = strpos($jstring, ";//")
$newstr=strcut($jstring, 1, $divdr)
tfWrite($htafilename, $jstring)
end_sub
// html, title, hdr, file, pos+size, bgcolor+ fontcolor, ext, paramOut, script, css, jQuery
// "html", "title", "hdr", "file", 10, 10, 390, 490, "#FFFFCC", "navy", "a", 0, "alert('Clickermann rules!');//", "", 0
// "><br>Check it, bro<hr><b>CLMN</b> screens <i>in example</i>", "MyProject", "Results", "assembld", 10, 10, 390, 490, "#FFFFCC", "navy", "a", 0, "alert('Clickermann rules!');// confirm('Agreed?');// ", "", 0
// Call the function in this way:
//html5js("><br>Check it, bro<hr><b>CLMN</b> screens <i>in example</i>","MyProject","Results","assembld",10, 10, 390, 490, "#FFFFCC","navy", "a", 0, "alert('Clickermann rules!');// confirm('Agreed?');// ","",0)
sub(html5js,$ht5html,$ht5title,$ht5hdr,$ht5file,$ht5posX,$ht5posY,$ht5sizeX,$ht5sizeY,$ht5bgcolor,$ht5fontcolor,$ht5ext,$ht5par,$ht5script,$ht5css3,$ht5jQueryLib)
// $htmTitle = " Project "
// $header1 ="Results"
// $htmTxt = "><br>Check it, bro<hr><b>CLMN</b> screens: <img src='http://crapware.aidf.org/images/editor.png' alt='clmn' height='300' />"
// $bgcolor ="#FFFFCC" // RGB formats: #ffaacc or #fac or red (second, shortened format is not for IE with its HTA file)
// $fontcolor ="navy"
// $htFiletype ="a" // A - application, M - markable HTML
// $htFiletype=$ht5ext
// $filename="assembld"
// $filename=$ht5file
$wtf = 0.1 // wait some secs
if($ht5file="")
$ht5file="assembld"
end_if
if(($ht5ext="a")|($ht5ext="m"))
//
else
$ht5ext="a"
end_if
$htafilename=strconcat($ht5file, ".ht",$ht5ext)
TFCLEAR ($htafilename)
//logclear
tfWrite($htafilename, "<!DOCTYPE html><html><head><link rel='shortcut icon' href='clmn31.ico' /><title>")
wait($wtf)
if($ht5title="")
tfWrite($htafilename, "🆑 Clickermann APP 💩 (",$htafilename,")")
else
tfWrite($htafilename, strconcat("🆑 ",$ht5title, " - Clickermann APP 💩 (",$htafilename,")"))
end_if
wait($wtf)
$parTx=""
if($ht5par=1)
STRSEPARATE ($_param_str, ";", $pararr)
$parTx=$pararr[2]
end_if
if($ht5jQueryLib=1)
$jQLnk="<script type='text/javascript' src='jquery-3.3.1.min.js'></script>"
else
$jQLnk=""
end_if
tfWrite($htafilename, strconcat("</title><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /><meta charset='utf-8'><script type='text/javascript' src='clmn.js'></script>",$jQLnk,"<link rel='stylesheet' href='clmn.css' type='text/css'><style>.smpl {background-color: #ffe; color: #930; }",$ht5css3,"</style><!-- --><!-- — ☢ <br /> <html lang='en'> --></head><body bgcolor='", $ht5bgcolor, "' id='bd'><font color='", $ht5fontcolor, "'><h1 id='hdr'>", $ht5hdr, "</h1><p id='prgrf'>", $ht5html, "</p></font><textarea id='ta' class='smpl'>Simple sample!</textarea><div id='clmnparam'>",$parTx,"</div><script>"))
wait($wtf)
$jscmd=strconcat("",$ht5script)
if(($ht5sizeX>0)|($ht5sizeY>0))
$jscmd=strconcat($jscmd, "resizeTo(",$ht5sizeX,", ",$ht5sizeY,");// ")
end_if
if(($ht5posX>0)|($ht5posY>0))
$jscmd=strconcat($jscmd, "moveTo(",$ht5posX,", ",$ht5posY,");// ")
end_if
js($jscmd)
wait($wtf)
tfWrite($htafilename, "</script></body></html>")
wait($wtf)
execute($htafilename)
//halt
end_sub
Краткий экскурс в теги хтмл:
<b>
bold</b> <i>
italics</i> <u>
underline</u> <s>
strikeout</s> <blink>мигание (deprec.)</blink>
<center>центрирование (deprecated)</center> <font size='24'>
Размер</font> <font color='red'>
Цвет</font>
<img src='
https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' />Картинка
<img src='
http://gg.gg/clmn-png' height='100' alt='Картинка с заданной высотой'>
<a href='https;//ya.ru/' name='метка'>Ссылка на
Яndex</> <a href='#метка'>Гиперссылка на заголовок в текущей веб-странице</a> <></>
<h1>
Заголовок 1-ого уровня</h1> <h5>
Заголовок 5-ого уровня</h5>
Горизонтальная horizRuler <hr />
<marquee>
</marquee>
Абзац без обтекания текста <br clear='all'>
Обычный абзац <br>
Юникод-символы: 😂 (hex), 😂 (dec), entities: ® Ñ §
<script type='text/javascript' src='джава-скрипт-файл.js'>Инструкции; джаваскрипта(); </script>
А также <form>, <input>, <button>, <select>, <div>, <table>, etc.
