Форум на Исходниках.RU

html-интерфейс

ya2500 — Sun, 26 May 2019 12:38:06 +0000

ya2500: я сейчас попиливаю кое-что на JS+HTML+CSS. вроде бы получается
но у меня ВОПРОС: как, блин, организовать таблицу рекордов?
общую таблицу рекордов для всех пользователей
допустим, если я собираюсь выложить свою поделку на itch.io
и
ещё, хорошо бы сохранять какую-то индивидуальную инфу
такую как номер уровня, до которого юзер дошёл

как вообще такое делается??

html-интерфейс

ya2500 — Sat, 13 Apr 2019 19:07:38 +0000

ya2500: Пример текстовой игры, сделанной двумя участниками нашего(не здешнего) сообщества,
на html + css + js:

https://enola.itch.io/vincent-and-brooks

- сделана с использованием Bootstrap.

html-интерфейс

Руслан — Thu, 11 Apr 2019 08:09:11 +0000

Руслан:

Цитата ya2500 @ 08.04.19, 20:31

Например, принять текстовую строку и если введена "ключевая фраза", то вывести "одно сообщение", если ввод пустой, то вывести "пустое сообщение", если что-то другое, то - "другое сообщение".

Вот пара вариантов в одном примере.
Первый input реагирует в основном по кнопке Enter. Второй input реагирует на нажатие клавиш, т.е. немедленно, не дожидаясь кнопки enter="ввод"...
Для наглядности добавил изменение цвета фона, и вывод некоторых результатов в

... :)
Пример не будет работат в древних IE, т.к. он не понимает стиля с прозрачностью - rgba...

<!DOCTYPE html>

<body>

function ObjChanged(obj)

{

//элемент для наглядности - вывод некоторых результатов

var ObjForResult=document.getElementById('ObjForShowResult');

//управление цветом

var toDecrement=obj.value.length*10;if (toDecrement>255) {toDecrement=255;}

//определим цвета

var rgb_R=255 - toDecrement;

var rgb_G=255;

var rgb_B=255 - toDecrement;

//сменить фон...

obj.style.background='rgba('+rgb_R+','+rgb_G+','+rgb_B+',1)';

//серёга?

if (obj.value=='Серёга') {ObjForResult.textContent='Привет Серёга! Давно не виделись! ))';} else {ObjForResult.textContent='Что случилось?? =o';}

}

</script>

<div>

<div id="ObjForShowResult">Жду Серёгу! :)</div>

</div>

</body>

</html>

Добавлено 11.04.19, 08:41
Кстати, для действия в зависимости от значения (множество вариантов значений\действий), можно заюзать switch

html-интерфейс

ya2500 — Mon, 08 Apr 2019 20:31:17 +0000

ya2500:

Цитата ya2500 @ 13.03.19, 17:37

Как принимать ввод пользователя в переменные скрипта?

Цитата Serafim @ 19.03.19, 04:53

Смотря какой ввод. Но большинство реализуется через создание подписчиков, ссылки на которые я кинул выше (some.addEventListener)

Цитата ya2500 @ 03.04.19, 18:16

html-интерфейс

Serafim — Mon, 08 Apr 2019 19:56:08 +0000

Serafim: ya2500, я подумал просто ты это увидишь, ну и поймёшь, что это лишь пример и копипастить его особо не нужно. По этому просто оставил комментарии в ключевых местах с описанием логики работы.

Т.е. достаточно лишь поиграться с ним, добавляя или удаляя куски на том же jsfiddle и всё, а потом перепишешь просто на свой лад, всё же опытный человек.

P.S. Ключевым в первом примере было то, что всякие анимации делаются не изменением атрибутов, а изменением классов, на которые просто можно навешать тучу разных стилей. Помимо этого лучше работать с data-атрибутами, а не id, их можно определять совершенно любые и группировать по смыслу. В данном случае я сопоставил в пару кнопочке "data-toggle=X" картинке "data-image=X", так, что при событии по идентификатору Х изменяется соответствующий класс у пары этого элемента.

Во втором примере то, что тултипы можно делать через :after, заполняя его содержимое через CSS функцию attr, а анимации точно так же, как и в первом примере - просто изменение свойств отображения (прозрачность и позиция). Ключевым свойством ещё является pointer-events, который отключает влияние курсора на сам элемент after (т.е. чтобы он не перехватывал события сам, а только родительская ссылка).

html-интерфейс

ya2500 — Mon, 08 Apr 2019 16:50:08 +0000

ya2500:

Цитата ya2500 @ 08.04.19, 12:51

И, да - через jsfiddle.net оба примера Serafimа работают отлично. А вот сделать так, чтобы они работали с моего винта и брали все данные только с винта - не получается.

Блин, у него же используется не CSS, а SCSS! Если в jsfiddle.net выставить CSS, то будет так же, как у меня сейчас.

Добавлено 08.04.19, 16:51

Цитата

SCSS это код, который очень похож на CSS, но чтобы он работал, нужно через специальную RUBY программу конвертировать в обычный CSS.

Добавлено 08.04.19, 16:58
Как подключить SCSS? Что такое SCSS?

Добавлено 08.04.19, 17:04
И, та-дам! Нашёл:

SCSS to CSS online-Compiler

Добавлено 08.04.19, 17:08
Теперь все примеры Serafimа заработали с моего винта!

html-интерфейс

Руслан — Mon, 08 Apr 2019 14:12:04 +0000

Руслан:

Цитата ya2500 @ 08.04.19, 12:51

Изменил кнопочку, чтобы выглядела нормально

Бонусом имеется знание(опыт) - "кнопочкой" может стать любой элемент... :rolleyes:

Цитата ya2500 @ 08.04.19, 12:51

а всплывающей подсказки - не появляется

Можно реализовать так (вполне кроссбраузерный вариант, т.с. базовой комплектации):

<div title="...подсказка...">некий текст.</div>

<a href="#" title="а здесь свой hint )">ссылка на ровное место</a>

html-интерфейс

ya2500 — Mon, 08 Apr 2019 12:51:46 +0000

ya2500: Итак, был немного занят, наконец-то дошли руки поковыряться:

Цитата Руслан @ 13.03.19, 22:27

простой пример (отображает\отключает картинку

0) Пример Руслана полностью понятен, работает, удалось реализовать его в отдельных html и js файлах. Изменил кнопочку, чтобы выглядела нормально(как у Serafima))

Цитата Serafim @ 19.03.19, 04:53

В результате можно сделать что-то вроде такого: https://jsfiddle.net/3naLfc6r/2/

1) Примеры Serafima что-то не удаётся адекватно перенести на свой винт: в первом примере html работает так, будто бы нет никакого js и css. Я уж и в один файл всё объединял и разносил в разные файлы, чего только не делал. А вот картинки котят вполне отлично на винте находятся.

Цитата Serafim @ 19.03.19, 04:53

Либо что-то вроде такого: https://jsfiddle.net/7m1ncr3e/

2) Второй пример Serafima работает по-разному, в зависимости от того, существует ли css файл. То есть, файл таки подключается. НО изменяется только положение надписей, а всплывающей подсказки - не появляется.

((

Добавлено 08.04.19, 13:02
И, да - через jsfiddle.net оба примера Serafimа работают отлично. А вот сделать так, чтобы они работали с моего винта и брали все данные только с винта - не получается.

html-интерфейс

ya2500 — Wed, 03 Apr 2019 18:16:18 +0000

ya2500:

Цитата Serafim @ 19.03.19, 04:53

html-интерфейс

Serafim — Tue, 19 Mar 2019 04:53:49 +0000

Serafim: ya2500 https://developer.mozilla.org/ru/docs/Web твой лучший друг.

В частности, вот описание событий: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent, а вот непосредственно клика: https://developer.mozilla.org/en-US/docs/We...ent/click_event

Создание события на клик:

some.addEventListener('click', event => console.log(event), false);

Инициализация скрипта:

<!doctype html>

<head>

<title>Example</title>

</head>

<body>

[].forEach.call(document.querySelectorAll('[data-id=image]'), element => { // Получаем все элементы с data-id="image"

element.addEventListener('click', event => { // Добавляем подписку на событие клика

let image = event.target; // Таргет события (https://developer.mozilla.org/ru/docs/Web/API/Event/target)

image.style.display = image.style.display === 'none' ? 'inline-block' : 'none'; // Переключаем видимость (в качестве альтернативы можно использовать opacity, тогда можно присобачить анимацию).

}, false);

});

</script>

</body>

</html>

В результате можно сделать что-то вроде такого: https://jsfiddle.net/3naLfc6r/2/

Добавлено 19.03.19, 04:57

Цитата ya2500 @ 13.03.19, 17:37

Как из этого скрипта выводить картинки в основной документ?

Создание производится через `let image = document.createElement('img')`

Цитата ya2500 @ 13.03.19, 17:37

Как принимать ввод пользователя в переменные скрипта?

Цитата ya2500 @ 13.03.19, 17:37

Как сделать реакцию скрипта по нажатию на ссылку в тексте или на кнопку?

Подписка + реализация события

Добавлено 19.03.19, 04:57

Цитата ya2500 @ 13.03.19, 17:37

А ещё нужна всплывающая подсказка, когда юзер водит мышкой по ссылке, не нажимая

Реализуется на чистом CSS.

1) Либо добавив title атрибут (системные тултипы)
2) Либо что-то вроде такого: https://jsfiddle.net/7m1ncr3e/

html-интерфейс

ya2500 — Fri, 15 Mar 2019 18:10:39 +0000

ya2500: Руслан, из твоего примера я понял, как принимать клики на что угодно и как скрывать/показывать что угодно и, отчасти, как использовать переменные в html(в данном примере это img1.style.display).

Этого может хватить надолго) но потом всё равно появятся ещё вопросы.

На пока что ставлю галочку "вопрос решён".

html-интерфейс

ya2500 — Fri, 15 Mar 2019 18:07:52 +0000

ya2500:

Цитата AVA12 @ 13.03.19, 21:05

Совершенно непонятно, где тут постановка задачи, а где авторское видение решения. Надо бы определиться. Для начала: что значит "есть html-документ, из которого вызывается javascript, реализованный в отдельном файле"? Это постановка проблемы (т. е. эти файлы уже даны свыше, но непонятно, что с ними делать)? Или же это часть предполагаемого решения настоящей проблемы (например, реализации GUI для локального приложения)?

Всё до первого вопроса - постановка проблемы.

Цитата AVA12 @ 13.03.19, 21:05

Реакция на события, всплывающие подсказки - это самые азы HTML и браузерного яваскрипта, манипуляция DOM-ом (ручками или шаблонизаторами) - это уровень выше, а 2D-движки - это уже горние выси.

Мой вопрос очень общий, примерно как "расскажите как программировать на javascript". Но только, как программировать на javascript я понимаю, где найти. И как писать html - я понимаю, где найти. Мне не понятно, как их вместе использовать.

Цитата AVA12 @ 13.03.19, 21:05

- а браузер для запуска приложения, случайно, не нужен?

Ещё нужен девайс, на котором этот браузер запускать, и много чего ещё)

html-интерфейс

Руслан — Fri, 15 Mar 2019 14:33:34 +0000

Руслан: ya2500, да пожалуйста. :)
Но пример который я привел - очень упрощен для наглядности. Во первых я бы рекомендовал изначально юзать utf-8. Вот пара уточнений, которые избавят новичка от шаманских танцев:

<!DOCTYPE html>

<head>

<title>Заголовок страницы</title>

</head>

html-интерфейс

ya2500 — Fri, 15 Mar 2019 12:08:31 +0000

ya2500: Руслан, спасибо! +1

html-интерфейс

Руслан — Wed, 13 Mar 2019 22:27:20 +0000

Руслан:

Цитата ya2500 @ 13.03.19, 17:37

Как сделать реакцию скрипта по нажатию на ссылку в тексте или на кнопку?

Для начала простой пример (отображает\отключает картинку вынося функцию в отдельный файл (подключение файла - <script type="text/javascript" src="jsfile.js">) - достаточно комментировать строки /*<script.... */ и /**/

<body>

function function1()

{

var img1=document.getElementById("img1_unic_id");

if (img1.style.display=='none') {img1.style.display='inline-block';} else {img1.style.display='none';}

}

</script>

я текст <span onclick="function1();" style="border:1px solid #CCC;" title="hint-подсказка">я типа кнопка =o</span> я текст

text1<br>

text2<br>

</body></html>

Цитата ya2500 @ 13.03.19, 17:37

А ещё нужна всплывающая подсказка, когда юзер водит мышкой по ссылке, не нажимая

выше добавил title к .

html-интерфейс

AVA12 — Wed, 13 Mar 2019 21:05:57 +0000

AVA12: Совершенно непонятно, где тут постановка задачи, а где авторское видение решения. Надо бы определиться. Для начала: что значит "есть html-документ, из которого вызывается javascript, реализованный в отдельном файле"? Это постановка проблемы (т. е. эти файлы уже даны свыше, но непонятно, что с ними делать)? Или же это часть предполагаемого решения настоящей проблемы (например, реализации GUI для локального приложения)?

Реакция на события, всплывающие подсказки - это самые азы HTML и браузерного яваскрипта, манипуляция DOM-ом (ручками или шаблонизаторами) - это уровень выше, а 2D-движки - это уже горние выси. И непонятно требование:

Цитата

чтобы кроме javascript ничего юзеру не требовалось бы для запуска приложения

- а браузер для запуска приложения, случайно, не нужен?

html-интерфейс

ya2500 — Wed, 13 Mar 2019 17:37:09 +0000

ya2500: Вопрос по javascript и HTML (я в этом полный новичок): есть html-документ, из которого вызывается javascript, реализованный в отдельном файле. Как из этого скрипта выводить картинки в основной документ? Как принимать ввод пользователя в переменные скрипта? Как сделать реакцию скрипта по нажатию на ссылку в тексте или на кнопку?

А ещё нужна всплывающая подсказка, когда юзер водит мышкой по ссылке, не нажимая

И по выводу картинок - может быть, посоветуете какой-нибудь 2d-движок?

===

То есть, вопрос касается html-интерфейса для моей проги на javascript: как принимать всяческий ввод и как отображать реакцию.

И, хотелось бы, чтобы вот это вот всё было не требовательным. То есть, чтобы кроме javascript ничего юзеру не требовалось бы для запуска приложения.