На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное DigiMania RSS
msm.ru
Модераторы: ElcnU, ANDLL, fatalist
Страницы: (2) [1] 2  все  ( Перейти к последнему сообщению )  
> html-интерфейс
    Вопрос по javascript и HTML (я в этом полный новичок): есть html-документ, из которого вызывается javascript, реализованный в отдельном файле. Как из этого скрипта выводить картинки в основной документ? Как принимать ввод пользователя в переменные скрипта? Как сделать реакцию скрипта по нажатию на ссылку в тексте или на кнопку?

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

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

    ===

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

    И, хотелось бы, чтобы вот это вот всё было не требовательным. То есть, чтобы кроме javascript ничего юзеру не требовалось бы для запуска приложения.
    "Гарри Поттер и методы рационального мышления" Элиезер Юдковский
    "Harry Potter and the Methods of Rationality" Eliezer Yudkowsky
      Совершенно непонятно, где тут постановка задачи, а где авторское видение решения. Надо бы определиться. Для начала: что значит "есть html-документ, из которого вызывается javascript, реализованный в отдельном файле"? Это постановка проблемы (т. е. эти файлы уже даны свыше, но непонятно, что с ними делать)? Или же это часть предполагаемого решения настоящей проблемы (например, реализации GUI для локального приложения)?

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

        Для начала простой пример (отображает\отключает картинку <img). вынося функцию в отдельный файл (подключение файла - <script type="text/javascript" src="jsfile.js"></script>) - достаточно комментировать строки /*<script.... */ и /*</script>*/
        ExpandedWrap disabled
          <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>.
        Сообщение отредактировано: Руслан -
        нечто нейтральное, пока что.
          Руслан, спасибо! +1
          "Гарри Поттер и методы рационального мышления" Элиезер Юдковский
          "Harry Potter and the Methods of Rationality" Eliezer Yudkowsky
            ya2500, да пожалуйста. :)
            Но пример который я привел - очень упрощен для наглядности. Во первых я бы рекомендовал изначально юзать utf-8. Вот пара уточнений, которые избавят новичка от шаманских танцев:

            ExpandedWrap disabled
              <!DOCTYPE html>
              <html lang="ru">
                <head>
                  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                  <title>Заголовок страницы</title>
                </head>
            нечто нейтральное, пока что.
              Цитата AVA12 @
              Совершенно непонятно, где тут постановка задачи, а где авторское видение решения. Надо бы определиться. Для начала: что значит "есть html-документ, из которого вызывается javascript, реализованный в отдельном файле"? Это постановка проблемы (т. е. эти файлы уже даны свыше, но непонятно, что с ними делать)? Или же это часть предполагаемого решения настоящей проблемы (например, реализации GUI для локального приложения)?


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

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


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

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


              Ещё нужен девайс, на котором этот браузер запускать, и много чего ещё)
              "Гарри Поттер и методы рационального мышления" Элиезер Юдковский
              "Harry Potter and the Methods of Rationality" Eliezer Yudkowsky
                Руслан, из твоего примера я понял, как принимать клики на что угодно и как скрывать/показывать что угодно и, отчасти, как использовать переменные в html(в данном примере это img1.style.display).

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

                На пока что ставлю галочку "вопрос решён".
                "Гарри Поттер и методы рационального мышления" Элиезер Юдковский
                "Harry Potter and the Methods of Rationality" Eliezer Yudkowsky
                  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

                  Создание события на клик:
                  ExpandedWrap disabled
                    some.addEventListener('click', event => console.log(event), false);


                  Инициализация скрипта:
                  ExpandedWrap disabled
                    <!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/
                  Сообщение отредактировано: Serafim -
                  user posted image user posted image user posted image
                    Цитата Serafim @
                    Смотря какой ввод. Но большинство реализуется через создание подписчиков, ссылки на которые я кинул выше (some.addEventListener)


                    Например, принять текстовую строку и если введена "ключевая фраза", то вывести "одно сообщение", если ввод пустой, то вывести "пустое сообщение", если что-то другое, то - "другое сообщение".
                    "Гарри Поттер и методы рационального мышления" Элиезер Юдковский
                    "Harry Potter and the Methods of Rationality" Eliezer Yudkowsky
                      Итак, был немного занят, наконец-то дошли руки поковыряться:

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


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

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


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

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


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

                      ((

                      Добавлено
                      И, да - через jsfiddle.net оба примера Serafimа работают отлично. А вот сделать так, чтобы они работали с моего винта и брали все данные только с винта - не получается.
                      "Гарри Поттер и методы рационального мышления" Элиезер Юдковский
                      "Harry Potter and the Methods of Rationality" Eliezer Yudkowsky
                        Цитата ya2500 @
                        Изменил кнопочку, чтобы выглядела нормально

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

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

                        Можно реализовать так (вполне кроссбраузерный вариант, т.с. базовой комплектации):
                        ExpandedWrap disabled
                          <div title="...подсказка...">некий текст.</div>
                          <a href="#" title="а здесь свой hint )">ссылка на ровное место</a>
                        Сообщение отредактировано: Руслан -
                        нечто нейтральное, пока что.
                          Цитата ya2500 @
                          И, да - через jsfiddle.net оба примера Serafimа работают отлично. А вот сделать так, чтобы они работали с моего винта и брали все данные только с винта - не получается.


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

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


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

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

                          SCSS to CSS online-Compiler

                          Добавлено
                          Теперь все примеры Serafimа заработали с моего винта!
                          "Гарри Поттер и методы рационального мышления" Элиезер Юдковский
                          "Harry Potter and the Methods of Rationality" Eliezer Yudkowsky
                            ya2500, я подумал просто ты это увидишь, ну и поймёшь, что это лишь пример и копипастить его особо не нужно. По этому просто оставил комментарии в ключевых местах с описанием логики работы.

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


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

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

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

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


                              ?
                              "Гарри Поттер и методы рационального мышления" Элиезер Юдковский
                              "Harry Potter and the Methods of Rationality" Eliezer Yudkowsky
                                Цитата ya2500 @
                                Например, принять текстовую строку и если введена "ключевая фраза", то вывести "одно сообщение", если ввод пустой, то вывести "пустое сообщение", если что-то другое, то - "другое сообщение".

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

                                ExpandedWrap disabled
                                  <!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
                                Сообщение отредактировано: Руслан -
                                нечто нейтральное, пока что.
                                1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
                                0 пользователей:


                                Рейтинг@Mail.ru
                                [ Script Execution time: 0,2013 ]   [ 14 queries used ]   [ Generated: 21.04.19, 12:17 GMT ]