html-интерфейс -> Форум на Исходниках.Ру

	Наши проекты: Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту

Здравствуйте, Гость ! [18.119.17.207]

Модераторы: ElcnU, ANDLL, fatalist

Новое голосование

html-интерфейс

ya2500

Сообщ. #1 , 13.03.19, 17:37

Full Member

Профиль · PM

Поощрения: 1 Dgm

Рейтинг (т): 8

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

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

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

===

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

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

AVA12

Сообщ. #2 , 13.03.19, 21:05

Profi

Профиль · PM

Поощрения: 9 Dgm

Рейтинг (т): 135

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

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

Цитата

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

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

Руслан

Сообщ. #3 , 13.03.19, 22:27

Full Member

Профиль · PM

Рейтинг (т): 14

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

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

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

Сообщение отредактировано: Руслан - 13.03.19, 22:27

ya2500	Сообщ. #4 , 15.03.19, 12:08
Full Member Профиль · PM Поощрения: 1 Dgm Рейтинг (т): 8	Руслан, спасибо! +1

Руслан

Сообщ. #5 , 15.03.19, 14:33

Full Member

Профиль · PM

Рейтинг (т): 14

ya2500, да пожалуйста.

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

<!DOCTYPE html>

<head>

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

</head>

ya2500

Сообщ. #6 , 15.03.19, 18:07

Full Member

Профиль · PM

Поощрения: 1 Dgm

Рейтинг (т): 8

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

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

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

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

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

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

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

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

ya2500

Сообщ. #7 , 15.03.19, 18:10

Full Member

Профиль · PM

Поощрения: 1 Dgm

Рейтинг (т): 8

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

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

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

Serafim

Сообщ. #8 , 19.03.19, 04:53

Местный покемон

Профиль · PM

Рейтинг (т): 79

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

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

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

Цитата 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/

Сообщение отредактировано: Serafim - 19.03.19, 05:08

ya2500

Сообщ. #9 , 03.04.19, 18:16

Full Member

Профиль · PM

Поощрения: 1 Dgm

Рейтинг (т): 8

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

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

ya2500

Сообщ. #10 , 08.04.19, 12:51

Full Member

Профиль · PM

Поощрения: 1 Dgm

Рейтинг (т): 8

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

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

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

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а работают отлично. А вот сделать так, чтобы они работали с моего винта и брали все данные только с винта - не получается.

Руслан

Сообщ. #11 , 08.04.19, 14:12

Full Member

Профиль · PM

Рейтинг (т): 14

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

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

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

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

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

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

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

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

Сообщение отредактировано: Руслан - 08.04.19, 14:21

ya2500

Сообщ. #12 , 08.04.19, 16:50

Full Member

Профиль · PM

Поощрения: 1 Dgm

Рейтинг (т): 8

Цитата 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а заработали с моего винта!

Serafim

Сообщ. #13 , 08.04.19, 19:56

Местный покемон

Профиль · PM

Рейтинг (т): 79

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

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

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

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

Сообщение отредактировано: Serafim - 08.04.19, 20:07

ya2500

Сообщ. #14 , 08.04.19, 20:31

Full Member

Профиль · PM

Поощрения: 1 Dgm

Рейтинг (т): 8

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

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

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

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

Руслан

Сообщ. #15 , 11.04.19, 08:09

Full Member

Профиль · PM

Рейтинг (т): 14

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

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

Пример не будет работат в древних 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

Сообщение отредактировано: Руслан - 11.04.19, 08:41

0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)

0 пользователей:

Страницы: (2) [1] 2 все

[ Script execution time: 0,0458 ] [ 16 queries used ] [ Generated: 16.04.24, 13:03 GMT ]