Що таке 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, об'єкт, 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, мало, strike, strong, sub, sup, tt, var, b, u, i, центр, 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; (border-collapse: collapse; border-spacing: 0; )

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

За промовчанням браузер встановлює свої налаштування для деяких властивостей css. Але біда тут у тому, що веб-браузерів багато і кожен може встановлювати свої правила. Яке рішення? Дізнатися, як скинути налаштування css за замовчуванням та перезаписати на свої. А ось про те, як це можна зробити і буде присвячено цю статтю.

CSS Reset або скидання стандартних налаштувань

CSS Reset — це набір стилів, які скидають параметри, встановлені стандартним браузером. Цей файл пише для себе кожен веб-розробник індивідуально, а хтось бере готове рішення. Ось із нього я і пропоную почати. Є багато хороших варіантів скидання стилів, але мені найбільше сподобався цей складений Еріком Мейєром:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Ліцензія: none (public domain)
*/
html, body, div, span, applet, об'єкт, 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,
мало, 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 = "Гість, ласкаво просимо на сайт!" ;)

Наприклад, попросимо користувача вгадати число 8:



Юлія