Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[3.143.9.115] |
|
Страницы: (2) [1] 2 все ( Перейти к последнему сообщению ) |
Сообщ.
#1
,
|
|
|
Вопрос по javascript и HTML (я в этом полный новичок): есть html-документ, из которого вызывается javascript, реализованный в отдельном файле. Как из этого скрипта выводить картинки в основной документ? Как принимать ввод пользователя в переменные скрипта? Как сделать реакцию скрипта по нажатию на ссылку в тексте или на кнопку?
А ещё нужна всплывающая подсказка, когда юзер водит мышкой по ссылке, не нажимая И по выводу картинок - может быть, посоветуете какой-нибудь 2d-движок? === То есть, вопрос касается html-интерфейса для моей проги на javascript: как принимать всяческий ввод и как отображать реакцию. И, хотелось бы, чтобы вот это вот всё было не требовательным. То есть, чтобы кроме javascript ничего юзеру не требовалось бы для запуска приложения. |
Сообщ.
#2
,
|
|
|
Совершенно непонятно, где тут постановка задачи, а где авторское видение решения. Надо бы определиться. Для начала: что значит "есть html-документ, из которого вызывается javascript, реализованный в отдельном файле"? Это постановка проблемы (т. е. эти файлы уже даны свыше, но непонятно, что с ними делать)? Или же это часть предполагаемого решения настоящей проблемы (например, реализации GUI для локального приложения)?
Реакция на события, всплывающие подсказки - это самые азы HTML и браузерного яваскрипта, манипуляция DOM-ом (ручками или шаблонизаторами) - это уровень выше, а 2D-движки - это уже горние выси. И непонятно требование: Цитата - а браузер для запуска приложения, случайно, не нужен? чтобы кроме javascript ничего юзеру не требовалось бы для запуска приложения |
Сообщ.
#3
,
|
|
|
Цитата ya2500 @ Как сделать реакцию скрипта по нажатию на ссылку в тексте или на кнопку? Для начала простой пример (отображает\отключает картинку <img). вынося функцию в отдельный файл (подключение файла - <script type="text/javascript" src="jsfile.js"></script>) - достаточно комментировать строки /*<script.... */ и /*</script>*/ <html><head></head> <body> <script type="text/javascript"> 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> <img id="img1_unic_id" src="face.jpg" style="display:none;"> <br> text2<br> </body></html> Цитата ya2500 @ А ещё нужна всплывающая подсказка, когда юзер водит мышкой по ссылке, не нажимая выше добавил title к <span>. |
Сообщ.
#4
,
|
|
|
Руслан, спасибо! +1
|
Сообщ.
#5
,
|
|
|
ya2500, да пожалуйста.
Но пример который я привел - очень упрощен для наглядности. Во первых я бы рекомендовал изначально юзать utf-8. Вот пара уточнений, которые избавят новичка от шаманских танцев: <!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Заголовок страницы</title> </head> |
Сообщ.
#6
,
|
|
|
Цитата AVA12 @ Совершенно непонятно, где тут постановка задачи, а где авторское видение решения. Надо бы определиться. Для начала: что значит "есть html-документ, из которого вызывается javascript, реализованный в отдельном файле"? Это постановка проблемы (т. е. эти файлы уже даны свыше, но непонятно, что с ними делать)? Или же это часть предполагаемого решения настоящей проблемы (например, реализации GUI для локального приложения)? Всё до первого вопроса - постановка проблемы. Цитата AVA12 @ Реакция на события, всплывающие подсказки - это самые азы HTML и браузерного яваскрипта, манипуляция DOM-ом (ручками или шаблонизаторами) - это уровень выше, а 2D-движки - это уже горние выси. Мой вопрос очень общий, примерно как "расскажите как программировать на javascript". Но только, как программировать на javascript я понимаю, где найти. И как писать html - я понимаю, где найти. Мне не понятно, как их вместе использовать. Цитата AVA12 @ - а браузер для запуска приложения, случайно, не нужен? Ещё нужен девайс, на котором этот браузер запускать, и много чего ещё) |
Сообщ.
#7
,
|
|
|
Руслан, из твоего примера я понял, как принимать клики на что угодно и как скрывать/показывать что угодно и, отчасти, как использовать переменные в html(в данном примере это img1.style.display).
Этого может хватить надолго) но потом всё равно появятся ещё вопросы. На пока что ставлю галочку "вопрос решён". |
Сообщ.
#8
,
|
|
|
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> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Example</title> </head> <body> <img src="//example.jpg" alt="example" data-id="image" /> <script async="async" defer="defer"> [].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/ Добавлено Цитата ya2500 @ Как из этого скрипта выводить картинки в основной документ? Создание производится через `let image = document.createElement('img')` Цитата ya2500 @ Как принимать ввод пользователя в переменные скрипта? Смотря какой ввод. Но большинство реализуется через создание подписчиков, ссылки на которые я кинул выше (some.addEventListener) Цитата ya2500 @ Как сделать реакцию скрипта по нажатию на ссылку в тексте или на кнопку? Подписка + реализация события Добавлено Цитата ya2500 @ А ещё нужна всплывающая подсказка, когда юзер водит мышкой по ссылке, не нажимая Реализуется на чистом CSS. 1) Либо добавив title атрибут (системные тултипы) 2) Либо что-то вроде такого: https://jsfiddle.net/7m1ncr3e/ |
Сообщ.
#9
,
|
|
|
Цитата Serafim @ Смотря какой ввод. Но большинство реализуется через создание подписчиков, ссылки на которые я кинул выше (some.addEventListener) Например, принять текстовую строку и если введена "ключевая фраза", то вывести "одно сообщение", если ввод пустой, то вывести "пустое сообщение", если что-то другое, то - "другое сообщение". |
Сообщ.
#10
,
|
|
|
Итак, был немного занят, наконец-то дошли руки поковыряться:
Цитата Руслан @ простой пример (отображает\отключает картинку <img) 0) Пример Руслана полностью понятен, работает, удалось реализовать его в отдельных html и js файлах. Изменил кнопочку, чтобы выглядела нормально(как у Serafima)) 1) Примеры Serafima что-то не удаётся адекватно перенести на свой винт: в первом примере html работает так, будто бы нет никакого js и css. Я уж и в один файл всё объединял и разносил в разные файлы, чего только не делал. А вот картинки котят вполне отлично на винте находятся. 2) Второй пример Serafima работает по-разному, в зависимости от того, существует ли css файл. То есть, файл таки подключается. НО изменяется только положение надписей, а всплывающей подсказки - не появляется. (( Добавлено И, да - через jsfiddle.net оба примера Serafimа работают отлично. А вот сделать так, чтобы они работали с моего винта и брали все данные только с винта - не получается. |
Сообщ.
#11
,
|
|
|
Цитата ya2500 @ Изменил кнопочку, чтобы выглядела нормально Бонусом имеется знание(опыт) - "кнопочкой" может стать любой элемент... Цитата ya2500 @ а всплывающей подсказки - не появляется Можно реализовать так (вполне кроссбраузерный вариант, т.с. базовой комплектации): <div title="...подсказка...">некий текст.</div> <a href="#" title="а здесь свой hint )">ссылка на ровное место</a> |
Сообщ.
#12
,
|
|
|
Цитата ya2500 @ И, да - через jsfiddle.net оба примера Serafimа работают отлично. А вот сделать так, чтобы они работали с моего винта и брали все данные только с винта - не получается. Блин, у него же используется не CSS, а SCSS! Если в jsfiddle.net выставить CSS, то будет так же, как у меня сейчас. Добавлено Цитата SCSS это код, который очень похож на CSS, но чтобы он работал, нужно через специальную RUBY программу конвертировать в обычный CSS. Добавлено Как подключить SCSS? Что такое SCSS? Добавлено И, та-дам! Нашёл: SCSS to CSS online-Compiler Добавлено Теперь все примеры Serafimа заработали с моего винта! |
Сообщ.
#13
,
|
|
|
ya2500, я подумал просто ты это увидишь, ну и поймёшь, что это лишь пример и копипастить его особо не нужно. По этому просто оставил комментарии в ключевых местах с описанием логики работы.
Т.е. достаточно лишь поиграться с ним, добавляя или удаляя куски на том же jsfiddle и всё, а потом перепишешь просто на свой лад, всё же опытный человек. P.S. Ключевым в первом примере было то, что всякие анимации делаются не изменением атрибутов, а изменением классов, на которые просто можно навешать тучу разных стилей. Помимо этого лучше работать с data-атрибутами, а не id, их можно определять совершенно любые и группировать по смыслу. В данном случае я сопоставил в пару кнопочке "data-toggle=X" картинке "data-image=X", так, что при событии по идентификатору Х изменяется соответствующий класс у пары этого элемента. Во втором примере то, что тултипы можно делать через :after, заполняя его содержимое через CSS функцию attr, а анимации точно так же, как и в первом примере - просто изменение свойств отображения (прозрачность и позиция). Ключевым свойством ещё является pointer-events, который отключает влияние курсора на сам элемент after (т.е. чтобы он не перехватывал события сам, а только родительская ссылка). |
Сообщ.
#14
,
|
|
|
Цитата ya2500 @ Как принимать ввод пользователя в переменные скрипта? Цитата Serafim @ Смотря какой ввод. Но большинство реализуется через создание подписчиков, ссылки на которые я кинул выше (some.addEventListener) Цитата ya2500 @ Например, принять текстовую строку и если введена "ключевая фраза", то вывести "одно сообщение", если ввод пустой, то вывести "пустое сообщение", если что-то другое, то - "другое сообщение". ? |
Сообщ.
#15
,
|
|
|
Цитата ya2500 @ Например, принять текстовую строку и если введена "ключевая фраза", то вывести "одно сообщение", если ввод пустой, то вывести "пустое сообщение", если что-то другое, то - "другое сообщение". Вот пара вариантов в одном примере. Первый input реагирует в основном по кнопке Enter. Второй input реагирует на нажатие клавиш, т.е. немедленно, не дожидаясь кнопки enter="ввод"... Для наглядности добавил изменение цвета фона, и вывод некоторых результатов в <div>... Пример не будет работат в древних IE, т.к. он не понимает стиля с прозрачностью - rgba... <!DOCTYPE html> <html><head><title></title></head> <body> <script> 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> <input id="input_UserFName" type="text" value="" placeholder="Ваше имя (событие 1)" style="background-color:rgba(255,255,255,1);" onchange="ObjChanged(this);"><!--обрати внимание, в JS передаю некий "this" - ссылка на обьект.--> <input id="input_UserLName" type="text" value="" placeholder="Ваше имя (событие 2)" style="background-color:rgba(255,255,255,1);" onkeyup="ObjChanged(this);"> <div id="ObjForShowResult">Жду Серёгу! :)</div> </div> </body> </html> Добавлено Кстати, для действия в зависимости от значения (множество вариантов значений\действий), можно заюзать switch |