Курсы javascript
В стандартной консоли ff ошибок нету. Кхм, я передаю переменную через ГЕТ и её вывожу алертом. Может быть переносы как-то кодируются в URL. щас проверю.
а если ближе к теме? тут javascript вроде, какой php? у меня tooltips не переносятся через \n. что делать?
Профессор, ну вы даёте. tooltips — всплывающая подсказка, она по умолчанию однострочная, надо сделать многострочную. Думалось что в таком монструозном давно развиваемом языке, как java, сделан какой-то ход для вставки знака переноса строки. То что нагуглилось либо не работает (
), либо это многоходовка зачастую с применением css. Хотелосьбы простое, элегантное решение как вставка спецсимволов в текст.
1)dmitriymar,
Ну и что мешает свои сделать? — не знание вопроса и неимение времени стать профессором, чтобы сделать казалось бы простую вещь — перенос строк в подсказке. Также отсутсвие разжёванных инструкций (для чайников; встречал фразы «настройки минимальны», «всё сами поймёте» которые меня теперь пугают ибо в 10из10 за ними кроется простыня в over9000 символов без подсвеченного синтаксиса), как внедрить css в js — всё что пишут расчитанно как минимум на средний уровень и зачастую для людей кто сделал javascripting частью своей работы и жизни. (а есть желание пользоваться им как прикладным инструментом)
Если o title html то каким боком к ним javascript? — правильно ли я понимаю?: тот title, что можно заполнить с помощью javascript есть элемент языка разметки html?
Следует гуглить многострочный tooltip или перенос строк на html?
— не работает и отображается как есть.
Можно ли внедрить нечто на подобии 
 в html tooltips и потом перехватывать выводимый ими текст javasript-ом, меняя 
 на символ переноса?
По сути html переносит строки, но делает это по какому-то алгоритму, построенному на кол-ве знаков в строке, но знак переноса строки он должен всё равно потом использовать. Можно ли вмешаться в этот алгоритм с помощью javascript и допуститим изменить то кол-во символов для переноса?
2)Раз нет элегантного решения решил углубиться. Взял Tipsy, положил рядом со своим скриптом, догружаю скрипт через
Правильно ли это, так грузить локальные скрипты? Как правильно если не так?
Теперь пытаюсь хотя бы запустить. Изменяю title через примено такие конструкции:
$("a:contains('Hello')").attr("title", "This is hello"); Как теперь натравить на этот объект tipsy tooltips? Такая конструкция не работает:
$("a:contains('Hello')").attr("title", "This is hello").tipsy(); Подскажите как по другому?
Затем планирую научиться управлять такими tipsy tooltip-ами: Переносы, иллюстрации, url.
3) Вроде получилось, но опятьже только когда я загрузил tipsy как
// @require [url]http://www.xiling.cn/syssource/mainpage/web/js/jquery.tipsy.js[/url]
и сейчас у меня вылезает два tooltips одновременно, стандартный и tipsy. Как быть далее?
4) Победил, но мне кажется это победа чайника над кофеваркой и есть ещё более приличные варианты:
Код который надо для загрузки tipsy библиотеки — выше.
Подгружаем стиль css, в greasemonkey это делается так:
var tipsycss = ".tipsy < padding: 5px; font-size: 10px; position: absolute; z-index: 100000; cursor: help; text-decoration: none; position: relative; >.tipsy-inner < padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; >.tipsy-inner < border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; >.tipsy-arrow < position: absolute; background: url('../images/tipsy.gif') no-repeat top left; width: 9px; height: 5px; >.tipsy-n .tipsy-arrow < top: 0; left: 50%; margin-left: -4px; >.tipsy-nw .tipsy-arrow < top: 0; left: 10px; >.tipsy-ne .tipsy-arrow < top: 0; right: 10px; >.tipsy-s .tipsy-arrow < bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; >.tipsy-sw .tipsy-arrow < bottom: 0; left: 10px; background-position: bottom left; >.tipsy-se .tipsy-arrow < bottom: 0; right: 10px; background-position: bottom left; >.tipsy-e .tipsy-arrow < top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; >.tipsy-w .tipsy-arrow < top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; >" GM_addStyle(tipsycss); Если библиотека загрузилась то натравить tipsy можно любым способом, хоть отдельно, хот как, но чтобы получить переносы строк и вообще html разметку, надо так:
$("a:contains('Hello!')").attr("title", "This
is Hell
o!").tipsy(); Теперь можно конфигурировать title, как угодно, хоть картинки подгружать, типа error и прочее.
Того это солянка из: Greasemonkey + jquery + tipsy + использование css внутри js — монструозно, не так как бы хотелось, но работает.
5) Картинку через не добавить. А жаль.
Добавить: но надо использовать одинарные кавычки в src, как собственно и всё остальное что в просто html имеет двойные кавычки, тут должно быть одинарным.
P.S. Между пунктами примерно по 2 часа прошло.
alert, prompt и confirm — диалоговые окна в JavaScript
Функция alert() предназначена для вывода в браузере предупреждающего модального диалогового окна с некоторым сообщением и кнопкой «ОК» . При его появлении дальнейшее выполнение кода страницы прекращается до тех пор, пока пользователь не закроет это окно. Кроме этого, оно также блокирует возможность взаимодействия пользователя с остальной частью страницы. Применение этого окна в основном используется для вывода некоторых данных при изучении языка JavaScript, в реальных проектах команда alert() не используется.
// message - текст сообщения alert(message);Метод alert() имеет один аргумент ( message ) — текст сообщения, которое необходимо вывести в модальном диалоговом окне. В качестве результата alert() ничего не возвращает.
Например, выведем при клике в диалоговое окно alert координаты курсора:
// es6 document.addEventListener('click', (e) => { alert(`Координаты: (${e.clientX},${e.clientY})`); }); // es5 document.addEventListener('click', function (e) { alert('Координаты: (' + e.clientX + ',' + e.clientY + ')'); });
Если alert сообщение нужно вывести на нескольких строках, то в этом случае следует воспользоваться «символом перевода строки», который в JavaScript записывается как \n :
// перенос строки в alert alert('Строка 1\nСтрока 2');Метод prompt()
Метод prompt() предназначен для вывода диалогового окна с сообщением, текстовым полем для ввода данных и кнопками «ОК» и «Отмена». Это окно предназначено для запроса данных, которые пользователю нужно ввести в текстовое поле.
// message - текст сообщения (является не обязательным), предназначено для информирования пользователя о том, какие данные у него запрашиваются // default - начальное значение для поля ввода, которое будет по умолчанию в нём отображаться (является не обязательным) const result = prompt(message, default);В переменную result возвращается значение введённое пользователем или null . Если пользователь не ввёл данные (поле ввода пустое) и нажал на «ОК», то в result будет находиться пустая строка.
Например, запросим имя пользователя при входе его на сайт с помощью prompt, а затем выведем его в элемент #welcome :
Метод confirm()
Метод confirm() объекта window применяется для вывода модального диалогового окна с сообщением и кнопками «ОК» и «Отмена». Оно обычно используется для запроса у пользователя разрешения на выполнение того или иного действия.
// question - текст сообщения (вопроса) const result = confirm(question);Например, выведем в элемент #result текст в зависимости то того на какую кнопку нажал пользователь в диалоговом окне confirm:
Итого
В этой статье мы рассмотрели 3 функции браузера: alert , prompt и confirm . Они предназначены для взаимодействия с пользователем. Диалоговые окна создаваемые этими методами являются модальными. Это значит, что они блокируют доступ пользователя к остальной части страницы пока оно не будет закрыто. Кроме этого, они ещё приостанавливают загрузку дальнейшей части страницы. По этим причинам, их имеет смысл использовать в скриптах только при изучении JavaScript, чтобы запросить или вывести некоторую информацию на экран. В настоящих проектах они обычно не используются.
Ещё одно ограничение при использовании этих окон связано с тем, что их расположение и оформление определяется браузером. Как-то изменить или настроить это нельзя.
Примеры
1. Использование методов prompt и alert для создания игры «Угадай число»?
Делай перенос строки в javascript по правилам, без ошибок в коде
Доброго времени суток, гости блога и верные подписчики. Сегодняшняя статья посвящена разбору простенькой, но полезной темы, а именно «Перенос строки в JavaScript». Вроде кажется, что в данном вопросе не могут возникнуть какие-либо проблемы. Однако это не так. Из-за привередливости и особенностей некоторых инструментов языка JS перенос текста может выполнятся по-разному.
Поэтому я расскажу вам, как осуществить перенос текстового контента на новую строку в операции alert, как удобно записывать код в программе, какие вспомогательные инструменты понадобятся при работе с document.write (), а также при использовании DOM команд и объектов. Ну что ж, вперед за дело!
Редактирование программного кода
Иногда возникают такие ситуации, когда в скрипте после выполнения какого-то условия необходимо вставить определенный кусок html-кода. Однако просто разрывать строку нажатием Enter нельзя. Для этого существует несколько вариантов.
Первый вариант – это использование символа обратного слеша (\). Согласитесь, это очень удобный и быстрый метод для структурирования кода.
Поздравляем! Вам пришла открытка!
Второй вариант – это разрыв выполняемого кода при помощи знака плюса «+». Этот метод используется и в других языках программирования, поэтому встречается часто также и в JavaScript. Скрипт в такой ситуации будет выглядеть следующим образом:
Перенос слов в alert ()
Вот тут все достаточно просто. Самый привычный и удобный способ переноса текста на новую строку, который также используется в C-подобных языках, JSON, Java и других. Стоит только вспомнить специальные символы и их обозначения.
Чаще всего для описываемого случая используют Escape-последователей перевода строки (\n) или же возврата каретки (\r). Обо всех символах можно почитать по ссылке.
Рассмотрите следующий пример.
Результат выполнения программы, отображенный на экране, будет выглядеть идентично.
Хитро передаем строки через команды DOM
Вот теперь пришло время разобрать добавление строк в html-файл c учетом переносов. Для этого можно воспользоваться специальным тегом
, к примеру, вот так:
1 2 3 4 5 6 7 8 9 10 11 12
Помимо этого, можно использовать другой парный элемент – . Данный тег позволяет сохранять все пробельные символы в том количестве, в котором их задал девелопер. Однако он преобразует шрифт текстового контента в моноширный. Таким образом, измененная программа будет выглядеть вот так:
Как в alert вставить html код?
Нужен перенос строки в alert для текста. Сразу говорю — \r и \n не вариант, так как движок запрещает такие символы вводить, потому только один вариант — html-тег.
alert(«Hello
world!»)//выведет hello
world!
Оценить 1 комментарий
Решил проблему, всем спасибо. Тупо админка глючная у движка, решил путем подмены файла через фтп — написал так же как и надо было до этого alert(«hello \n world») и заменил на сервере этот файл. Как итог — ничего не добавилось лишнего и перенос осуществился благополучно. Всем спасибо.
Никак, alert (и prompt и confirm) не поддерживает html. Используйте сторонние плагины, например, SweetAlert.
Однако, если вам нужно просто вставить перенос строки, то это делается вот так (проверял только в Chrome):
alert(‘Hello\nworld!’);
об \n и \r читайте в описании моего вопроса, там написано почему они не являются решениями данной проблемы.
С alert никак.
Но вы можете отобразить на странице свой диалог используя js-фреймворки или самостоятельно, через div со стилем position: absolute;