Лабораторна робота № 16
Мета: За допомогою JavaScript обробляти користувацьке введення даних та автоматично створювати сторінки з результатами обробки цих даних.
Об'єкт window
Навіть якщо ви його не знаєте, ви напевно з ним знайомі. Ну, скажемо так, зустрічали. Ми вже згадували функцію alert(). Повний шлях до неї виглядає так: window.alert(). Це означає, що даний метод є приналежністю об'єкта window. Однак доти, поки ви не збираєтеся вивести вікно повідомлення в якому-небудь іншіму вікні браузера, відмінному від поточного, цей повний шлях вам не потрібний. Ви, імовірно, пам’ятаєте, що alert() виводить вікно з повідомленням, яке можна закрити, клацнувши на кнопці ОК. Поки вікно активно, у головному вікні браузера нічого не може відбуватися. Рядок у дужках задає текст повідомлення.
Як і в будь-якого нормального об'єкта, в window є властивості й методи. По більшій частині, властивості можна тільки зчитувати, а змінювати не можна, оскільки вікно вже існує. Серед властивостей є такі як name (це те, що пишеться в рядку заголовка), length (число фреймів у вікні), self (щось типу покажчика на самого себе, тобто на поточне вікно) і status. Останнє можна використати для зміни напису в рядку стану браузера. Рядок стану звичайно являє собою короткий опис, що відбувається в даний момент на веб-сторінці. От приклад:
<а href = "products.html" onmouseover = "status='Подивитися повну лінійку продукції' " onmouseout="status=''"> Продукція </а>
В об'єкта window є чимало методів, що дозволяють додавати й змінювати всякі рюшечки, що стосуються вікна. Серед них є вже знайомі alert() і eval(). До речі кажучи, eval() дозволяє перетворювати будь-які рядки в код JavaScript, а не тільки в числа.
При роботі з window можна використати такі методи, як, наприклад, confirm(). Робить він всі те ж саме, що й alert(), тільки замість однієї кнопки ОК вікно містить дві кнопки: ОК і Cancel (Скасування). Якщо користувач клацає на ОК, повертається значення true, а якщо на хрестику у верхньому правому куті або на кнопці Cancel, повертається false. Наприклад: var keepGoing = confirm("Хочете продовжити?");
У те ж сімейство методів можна віднести prompt(), що теж відкриває діалогове віконце, але при цьому очікує від користувача уведення значення. Можна вказати або тільки текст повідомлення, або й текст повідомлення, і підказку, що буде видна за замовчуванням у поле уведення. Приклад:
var numberGuess = prompt("Уведіть число", 5);
var email Address = prompt("Уведіть e-mail", "vpupkin@fakecorp.com");
Метод ореn() призначений для відкриття нового вікна браузера. Можна вказувати різні параметри, що керують зовнішнім виглядом вікна, і навіть задавати відразу URL. який буде відкритий. Щоб просто відкрити вікно й завантажити в нього яку-небудь веб-сторінку, напишіть вираження: window.open("URL")
Існує такий метод: resizeTo(). Він дозволяє автоматично масштабувати вікно браузера, тобто задати його висоту й ширину в пикселах. Наприклад, якщо ваш сайт найкраще виглядає при 800 х 600, можете включити в заголовну сторінку наступний рядок: <body onload="window.resizeTo(800.600)">
Поряд з усіма цими властивостями й методами об'єкт window має ряд підоб’єктів, серед яких location, document і history. Про перші дві буде окрема розмова, а що стосується об'єкта history, його можна використати в основному для одержання доступу до URL, які користувач недавно відкривав і які браузер зберігає в пам'яті. Серед властивостей об'єкта history наступні: current, previous, next. Вони служать для відкриття недавно відвіданих сторінок. Властивість length дозволяє довідатися, скільки адрес зберігає браузер. При цьому метод history.go(x) дозволяє перейти на сторінку з номером х. Якщо х позитивне, то метод буде відраховувати сторінки «назад». Якщо ви напишете негативне значення х, відлік буде вестися «уперед». От ще два корисних методи history: back() і forward(). Служать для переходу, відповідно, назад і вперед: <а href="" onclick="history.back()">Назад</а>
Об'єкт location
Як уже говорилося, цей об'єкт є частиною об'єкта window, тому повний шлях до нього наступний: window.location. Звичайно, втім, що поточна область дії така, що можна залишити тільки location.
У цього об'єкта існує чимало властивостей, і всі вони призначені для одержання певних частин URL поточної сторінки. Наприклад, location.href повертає весь URL:
document.writeln("Адреса цієї сторінки: " + location.href);
Всі інші властивості location повертають якісь окремі частини адреси. Розглянемо повний список:
• href. Повний URL.
• protocol. Протокол (наприклад, http:).
• hostname. Ім'я хоста (наприклад, www.fakecorp.com).
• port. Номер порту, якщо це істотно.
• pathname. Повний шлях, включаючи каталоги, підкаталоги й ім'я документа.
Цю інформацію можна використати. Наприклад, на кожній сторінці де-небудь у куті поміщати її реальний URL. Згадаємо, як це робиться: document.writeln("Aдpec цієї сторінки: " + location.href); Можна, наприклад, завантажити в браузер нову сторінку таким способом: location.href = "http://www.fakecorp.com/newpage.html"
Об'єкт document
Це ще одне дітище об'єкта window. Однак дитинка ця досить доросла й самостійна. Насправді при написанні скриптів на JavaScript і, зокрема, при розробці форм саме document виявляється найбільш часто використовуваним об'єктом. Дійсно, саме тут зберігаються всі об'єкти й елементи ваших сторінок. Хочеться згадати в першу чергу такі властивості даного об'єкта:
• domain. Зберігає ім'я домена, на якому розташований документ (наприклад, www.fakecorp.com).
• url. URL поточного документа.
• referrer. Може використатися для зберігання URL того документа, на якому стояло посилання на даний (тобто адреса сторінки, з якого користувач сюди потрапив).
• lastmodifled. Дата внесення останніх змін.
• title. Зберігає заголовок документа (той самий, котрий зазначений в елементі <title>)
• anchors. Масив. У ньому зберігаються якорі документів з іменами, пов'язаними з ним.
• images. Ще один масив. Цей зберігає всі зображення (вірніше, посилання на них
• forms. І ще масив. Дозволяє одержати доступ до різних форм сторінки.
Майже всі властивості говорять самі за себе. Що стосується трьох масивів - anchors, images і forms, то доступ до них здійснюється так само, як до масивів, які обговорювалися раніше. Наприклад, щоб відшукати URL першого зображення на сторінці, можна написати наступне: alert(document.images[0].src):
А можна й змінити URL зображення, і це приведе до того, що на сторінці з'явиться посилання на інший графічний файл. А так начебто все досить просто й зрозуміло: document.images[0].src = "images/new.gif"
В об'єкта document є кілька методів, з якими ви вже знайомі. Серед них метод document.writeln(), він використовується для написання одного рядка тексту й розмітки на веб-сторінці. Для того ж служить і метод document.write(). Різниця в тім, що перший автоматично вставляє спеціальний знак перекладу каретки (який, втім, однаково не розпізнається браузером, якщо тільки текст не укладений у теги <рге>), а другий цей знак не вставляє.
Існує можливість очистити поточну сторінку й фактично створити вручну нову. Це робиться в такий спосіб. Спочатку очищаємо сторінку повністю: document.open(). Потім за допомогою document.write() записуємо в неї всі що потрібно. Тепер document.close() - і нова сторінка готова! Розглянемо листинг.
Листинг. Персонализация з використанням форми
<html>
<head>
<title> Сторінка персонализации </title>
<script type = "text/javascript">
<!-і Ховаємо код
function personalizePage()
{
var userName = personalForm.myName.value;
document.open()
document.write("<html><head><title>Hoвый документ</title></head>")
document.write("<body><h1> Вітаннячко, " + userName + "</h1>")
document.write("<p>Этa сторінка створена спеціально для <b>тебе</b>!</р>")
document.write("</body></html>")
document.close()
}
// закінчили ховатися -і>
</script>
</head>
<body>
<h1>Сторінка персонализации й авторизації</h1>
<p>Добрий день! Уведіть своє ім'я, потім клацніть на кнопці "Далі". Уміст сторінки зміниться<br /> Зверніть увагу на те. що URL при цьому не зміниться!</р>
<form name="personalForm">
Уведіть своє ім'я: <input type="text" name="myName">
<input type="button" name="personalButton" value="Далі" onclick="personalizePage()" />
</form>
</body>
</html>
У цьому прикладі варто звернути увагу не тільки на метод document.open(), але й на те, що насправді сторінка не змінюється. Вираження var userName = personalForm.myName.value; говорить про те, що ми перебуваємо на відповідному рівні областей дії, тобто нам не треба ніяк ускладнювати шлях до об'єкта personalForm. Якби сторінка змінилася (з погляду об'єктної моделі, наприклад, якби змінилося значення location.href), нам довелося б небагато потрудитися, перш ніж одержати доступ до того ж значення.
ХІД РОБОТИ
Створити сторінку з анкетою, ім’я респондента та результати обробки виводити на іншій сторінці, аналогічно до того, як показано в прикладі.