Что такое prompt в javascript. Описание методов alert, confirm и prompt в JavaScript. Пример атаки с непостоянным XSS

В этой статье мы поговорим о сбросе стилей и рассмотрим пример создания такого файла reset.css .

Идея броса стилей появилась около 10 лет назад. Которая собственно заключалась в том, чтобы при помощи небольшого набора CSS стилей привести вид страницы во всех браузерах к одинаковому. Конечно не всегда это получается, но некоторые моменты можно исправить - например border не понятно откуда берущийся в некоторых версиях IE . Или синяя обводка (outline ) у полей.

Не для одного front-end разработчика не секрет, что браузеры очень привередливы и каждый обрабатывает элементы HTML по своему, добавляя свои стандартные стили.

Так как этой идей загорелись давно, не удивительно, что есть уже готовые файлы сброса, обычно их называют reset.css , и подключают ко всем проектам.

Почему в отдельном файле? Да просто по тому, что так удобнее их переносить от проекта к проекту.

Вот пример reset.css от 2007 года:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }

Это лишь стандарт этого файла принятый определнным кругом веб-разработчиков.

Я же советую вам, будь вы опытным программистом или только начинающим разработать свой файл сброса. За основу можно взять вышеописанный стандарт, дополнить его своими селекторами или изменить существующие. Вот пример такого файла, который я разработал для себя:

input, textarea,a , button, select{outline:none} img {border:none;} hr { clear:both; border:none; background:none; } * { background-repeat:no-repeat; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; margin:0; padding:0; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }

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

По умолчанию браузер устанавливает свои настройки для некоторых свойств в css. Но беда тут в том, что веб-обозревателей много и каждый может устанавливать свои правила. Какое решение? Узнать, как сбросить настройки css по умолчанию и перезаписать на свои. А вот о том, как это можно сделать и будет посвящена эта статья.

CSS Reset или сброс настроек по умолчанию

CSS Reset — это набор стилей, которые сбрасывают какие-то параметры, установленные браузером по умолчанию. Этот файл пишет для себя каждый веб-разработчик индивидуально, а кто-то берет готовое решение. Вот с него я и предлагаю начать. Есть много хороших вариантов сброса стилей, но мне больше всего понравился этот, составленный Эриком Мейером:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Я немного прокомментирую код. Во-первых, тут сбрасываются внутренние и внешние отступы для всех нужных элементов. Во-вторых, на лицо поддержка HTML5 элементов. Для них задано правило, которое позволит им правильно отображаться в некоторых версиях браузеров. В-третьих, заданы типичные настройки для удобной работы с таблицами (убраны отступы между ячейками и двойные границы). А еще сброшены стандартные маркеры для списков и кавычки для цитат. Эти части кода стоит удалить, если вы хотите использовать стилизацию по умолчанию.

Как сбросить настройки css самостоятельно

При более менее нормальном владении css можно попробовать самому написать пару правил. Например:

*{
margin: 0;
padding: 0;
}

Это, пожалуй, самая простая команда. Звездочка в данном случае представляет все селекторы, поэтому стили будут применены ко всем элементам на веб-странице, сбросив у них внешние и внутренние отступы. Вы удивитесь, но этих простых строчек кода может хватить для обеспечения кроссбраузерности во многих веб-обозревателях. Все остальные правила можно добавить по собственному желанию. Я советую добавить еще display: block для всех тегов HTML5.

Где разместить правила css reset

Вот выше я вам предложил код, а куда его вставлять? Тут есть два варианта:

Вставить его в самом начале главной таблицы стилей на вашем сайте
Создать на сервере новый css-файл и сохранить в него код, после чего сохранить и подключить ко всем страницам ПЕРЕД основной таблицей style.css .

Подробнее о подключении таблицы стилей css к html смотрите

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

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

В этой статье мы изучим три интересных метода, а именно методы alert(), confirm() и prompt() . Они все предназначены для взаимодействия с пользователем .

Все эти три метода принадлежат объекту window(Окно браузера). И они могут вызываться таким образом: window.название_метода(); Но, JavaScript нам позволяет этот объект window не указать, а писать просто название метода.

Начнём мы с метода alert(). Данный метод, выводит указанное сообщение в окошко браузера пользователя. Это окошко отобразится поверх всей страницы, и пока пользователь не нажмёт на кнопку OK, оно не закроется.

Для демонстрации выведем какое-то сообщение с помощью метода alert()

Var today_is = "Понедельник"; alert("Сегодня " + today_is);

Внутри метода мы можем указать любую строку, только без html тегов. Они здесь не обрабатываются, а выводятся как есть.

Если строка, которую хотим указать очень длинная, и мы хотим сделать переход на новую строку, то здесь html тег
не сработает. Здесь нужно использовать символ "\n".

Alert("Looooooooong \nStringggggggg");

Данный метод используется часто для поиска ошибки в коде .

Процесс обработки кода идёт сверху вниз, поэтому для ловли ошибки, просто пишем метод alert() в предполагаемую область, где находится ошибка. И если alert() сработал, значит до строчки, где он написан, ошибок нет.

Дальше, нужно его перенести на одну строку или больше ниже. Сохраняем изменения, опять обновляем страницу в браузере, и смотрим, если alert() сработал, значит, ошибок до строчки, где он находится, нет, в противном случае, если он не сработал, ошибка находится в строку выше той, где он сейчас находится . Таким вот образом можно найти ошибку в коде.

метод confirm()

Этот метод используется для подтверждения ответа, на какой-то вопрос. Есть только два варианта ответа, да(OK) или нет(Cancel/Отмена). Если пользователь отвечает да, то метод возвращает истину(true), иначе он возвращает лож(false).

Для примера, выведем окошко с помощью метода confirm(), где спросим пользователя "Вы точно хотите покинуть страницу?". Если пользователь ответит да, то через метод alert() выведем такое сообщение "Пользователь хочет покинуть страницу", иначе выведем другое сообщение "Пользователь НЕ хочет покинуть страницу".

Var user_answer = confirm("Вы точно хотите покинуть страницу?"); if(user_answer) alert("Пользователь хочет покинуть страницу"); else alert("Пользователь НЕ хочет \nпокинуть страницу");

Таким вот образом работает метод confirm(). Он может использоваться в разных случаях. Например, перед тем как удалить что-то с сайта принято спросить пользователя, уверен ли он в свои действия. Или же перед тем как отправить форму, тоже можно спросить пользователя "Вы все заполнили правильно?", если он ответит да, то форма отправиться, иначе она не отправится.

Метод prompt()

И последний метод, которого мы изучим, это метод prompt(). Данный метод используется реже, чем остальные два метода. Он позволяет получить некую информацию от пользователя, которую он введёт в текстовое поле.

Как результат метод prompt() возвращает либо введённую строку, если пользователь нажал кнопку OK, либо null, если пользователь нажал на кнопку отмена.

Как параметр, то есть внутри скобок у данного метода мы можем написать указательную строку или вопрос, чтобы пользователь знал какую информацию необходимо ввести.

Например, попросим пользователя ответить на вопрос "Как Вас зовут?". Введённое пользователем имя, отобразим на экран с помощью метода alert().

Var name = prompt("Как Вас зовут?"); alert("Вас зовут " + name);

Сохраняем и открываем страницу в браузере.

Разумеется, в текстовое поле из метода prompt() можно ввести любую информацию. Эта информация будет возвращена как строка, даже в случае чисел или других спецсимволов.

Для примера попросим пользователя ввести две числа, чтобы потом умножить их. Будет некий калькулятор для умножения чисел.

Var x = prompt("Введите первое число:"); var y = prompt("Введите второе число:"); //Преобразование введенных чисел из строкового типа в числовой тип x = Number(x); y = Number(y); document.write(x + " * " + y + " = " + (x * y));

Введённые числа являются строками, поэтому для правильного результата умножения, необходимо эти числа пройти через функцию Number(), которая преобразует их из строкового типа в нормальные числа.

Ну и на этом все. Теперь Вы знаете ещё три метода: alert(), confirm() и prompt() . Которых Вы смело можете использовать на практике.

На этом уроке мы познакомимся с методами объекта window: alert() , prompt() и confirm() .

Метод alert()

Метод alert() предназначен для вывода на экран пользователя предупреждающего диалогового окна с указанным сообщением и кнопкой "ОК". Оно может использоваться для того чтобы донести до пользователя важную информацию.

window.alert(Параметр_1);

Метод alert() имеет один обязательный параметр - это текст сообщения, которое отображается в диалоговом окне. Данный метод в результате своего выполнения ни чего не возвращает.

Например, выведем для посетителя сайта при нажатии на ссылку предупреждающее диалоговое окно: Перейти на сайт

Метод confirm() Метод confirm() объекта window предназначен для вывода на экран пользователя диалогового окна с указанным сообщением и кнопками "ОК" и "Отмена". Окно с подтверждением можно использовать, чтобы запросить у пользователя разрешение на выполнение того или иного действия.

var resultConfirm = confirm(Параметр_1);

Данный метод имеет один параметр - это текст сообщения, которое будет выведено в диалоговое окно.

Метод confirm() в качестве результата (resultConfirm) своего выполнения возвращает одно из двух значений:

true , если пользователь нажал "ОК";
false , если пользователь нажал "Отмена" или закрыл его.

Например, выведем в элемент р с id="resultConfirm" результат нажатия пользователем на кнопку "ОК" в диалоговом окне:

var resultActionUser = confirm("Пользователь, пожалуйста нажми на кнопку ОК."); if (resultActionUser) { document.getElementById("resultConfirm").innerHTML = "Пользователь, спасибо что Вы нажали на кнопку ОК"; } else { document.getElementById("resultConfirm").innerHTML = "Пользователь, мы разочаровались в Вашем ответе"; }

Метод prompt()

Метод prompt() предназначен для вывода на экран пользователя диалогового окна с сообщением, текстовым полем для ввода данных и кнопками "ОК" и "Отмена". Оно предназначено для того, чтобы запросить данные у пользователя.

var resultPrompt = prompt(Параметр_1, Параметр_2);

Данный метод имеет два параметра:

сообщение, которое будет выведено в диалоговом окне. Данный параметр является обязательным и содержит сообщение, в котором "говорится", какие данные должен ввести пользователь в текстовое поле;
второй параметр является необязательным и может использоваться для указания начального значения, которое будет выведено в поле ввода диалогового окна при открытии.

В зависимости от действий пользователя метод prompt() может возвращать следующие данные:

текстовое значение - если в поле ввода содержатся данные и пользователь нажал "ОК";
пустая строка - если в поле ввода не содержатся данные и пользователь нажал "ОК";
null - если пользователь нажал "Отмена" или закрыл это окно, при этом не важно какие данные были введены в текстовое поле.

Примечание: диалоговое окно, которое появляется в результате выполнения одного из методов alert() , confirm() или prompt() является модальным, т.е. оно блокирует доступ пользователя к родительскому приложению (браузеру) до тех пор, пока пользователь не закроет это диалоговое окно.

Например, запросим у пользователя имя и выведем в зависимости от результата текст в элемент c id="nameUser" :

var nameUser = prompt ("Введите своё имя?"); if (nameUser) { document.getElementById("nameUser").innerHTML = nameUser +", добро пожаловать на сайт!"; } else { document.getElementById("nameUser").innerHTML = "Гость, добро пожаловать на сайт!"; }