Створення довгого рядка

Розіб’ємо рядок з датою. От як це виглядає:

document.write("Сьогодні " +

(Now.getMonth()+1)+

"-" + Now.getDate() + "-"

+ Now.getFullYear() + ".

Ви зайшли на Web-сторінку рівно в : "

+ Now.getHours() +

":" + Now.getMinutes() + " і "

+ Now.getSeconds() +

" секунд")

1. Починаємо з "Сьогодні ".

2. Потім слідує знак плюс.

3. (Now.getMonth()+1) додається без лапок, тому що нам потрібний не цей текст, а повертане число.

4. Ще плюс.

5. Потім дефіс в лапках, аби відокремити наступне число.

6. Плюс.

7. Потім Now.getDate() без лапок, щоб у нас був день.

8. Плюс.

9. Ще дефіс в лапках, щоб він був видний на сторінці.

10. Плюс.

11. Ще один метод Now.getFullYear повідомить рік.

12. Продовжуйте далі за цією схемою, і сценарій виведе саме те, що ви хочете. Тоді ви всім зможете сказати, яка година

Додавання пропусків

Один невеликий прийом-порада, яку треба знати. Скільки б пропусків ви не вставили до і після знаку плюс, це ніяк не вплине на видимий результат. Елементи підуть суцільним текстом. Тому, якщо в текст потрібно вставити пропуски, додайте їх в частини тексту в лапках. Наприклад: "Сьогодні "

Бачите, тут додано два пропуски перед другою лапкою? Це перетвориться на два пропуски на сторінці, коли сценарій виконається. Пам'ятайте: це не HTML. У Javascript існують свої правила відносно пропусків.

Відома проблема

Мабуть, ви відмітили, що номер місяця буде на одиницю менший ніж потрібно, якщо використовувати просто getMonth(). Чому? Пригадайте, що числа повідомляє JavaScript, а JavaScript любить рахувати від нуля. Тобто, січень нульовий місяць і так далі. Що ж робити? Додати 1, зрозуміло, що ми і зробили в нашому прикладі: Now.getMonth()+1

Обробники подій

Спочатку декілька вступних зауважень. Події (event) і обробники подій (event handler) відносяться до JavaScript, але вони швидше "вбудовані" в HTML-код, а не існують самостійно, як ті сценарії, які ми створили. Події є вбудованими, так що вони не вимагають команд <SCRIPT> і </SCRIPT>. Самі вони є не сценаріями, а швидше невеликими інтерфейсами, що забезпечують взаємодію між сторінкою і читачем.

Події — це те, що відбувається. Вони додадуть динаміки Web-сайту. Побачивши їх, відвідувачі сайту скажуть: "Ух ти!", а довгі сценарії JavaScript для цього зовсім не знадобляться.

onMouseOver

Існує безліч подій, але спершу виберемо одну з найбільш популярних, — onMouseOver (навести курсор миші).

<A HREF="http://www.mail.ru" onMouseOver="window.status='Почтовая служба'; return true">Посилання</A>

При наведенні курсору миші на рядок посилання, посилання у вікні браузера зміниться.

По-перше, onMouseOver (зверніть увагу на заголовні букви) є обробник подій (Event Handler) гіпертекстового посилання. Це зрозуміло? Він використовується усередині гіперпосилання.

Формат гіпертекстового посилання залишається без змін. Ті ж команди і ті ж подвійні лапки. Обробник подій onMouseOver ставиться відразу ж після адреси URL.

Подія (Event) приводиться в дію, коли браузер розпізнає onMouseOver="". Загальна схема вже має бути трохи зрозуміла: два елементи, розділені крапкою. До цих пір це означало, що один є об'єктом, а інший методом. Але в даному випадку об'єктом є window (вікно), воно існує; status (статус) є властивістю (property) вікна. Це невелика ділянка вікна, де повинен розміститися ідучий далі в команді текст. Це простіше запам'ятати, якщо уявити, що метод зазвичай виражається дієсловом, як write (писати) або get (отримати). Властивість виражається іменником і існує як невелика частина елементу, що стоїть перед крапкою.

Якщо в window є змінна властивість status, значить, можна змінити і інші властивості вікна. Це вірно, але не забігатимемо тут вперед. Розберемося доки з вікном і його рядком стану.

Після window.status ставиться знак рівності =, за яким слідує те, що повинне статися. В даному випадку це текст в одинарних лапках. Він з'явиться в рядку стану, коли ви наведете курсор на гіпертекстове посилання.

Будь ласка, звернете ще раз увагу на крапку з комою в кінці командного рядка.

Потім слідує return true. Ці два слова мають сповна певний вплив на те, що станеться, коли покажчик миші переміститься на посилання. Якщо вони присутні, сценарій перевірить, чи є рядок стану. Якщо перевірка буде успішною (true), відбувається подія. Зверніть увагу, що коли покажчик миші переміщається на посилання, то текст в рядку стану блокується. Він більше не змінюється при подальших переміщеннях покажчика миші на посилання. (Якщо відновити сторінку, то можна буде це побачити).

Що станеться, якщо ці два слова загубляться? Давайте подумаємо. Якщо перевірка рядка стану відсутня, то виконується дія за замовчуванням. За замовчуванням в HTML виводиться URL-посилання, на яке вказує курсор миші. Потім, коли курсор зміщується із посилання, станеться подія. І так як перевірка відсутня, та подія відбуватиметься всякий раз при переміщенні курсора миші над посиланням. Такий результат буде, напевно, кращий.

Повернемося до властивостей, про які ми говорили раніше. Якщо вікно має властивості, то інші об'єкти теж повинні мати властивості. Як щодо кольору фону? Це ж властивість, чи не так? У HTML кольором фону сторінки управляє команда BGCOLOR.

Те ж саме і тут, лише обов'язково дотримуйте регістр символів. У JavaScript колір фону позначається bgColor. Подумаємо, як створити посилання, яке змінювало б колір фону вікна за допомогою події onMouseOver:

<A HREF="http://www.mail.ru" onMouseOver="document.bgColor='pink'; return true">Натисніть тут</A>

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

Нове правило: ставте кому, аби відокремити один від одного декілька подій JavaScript.

А що щодо лапок? Запам'ятаєте, в лапки поміщають окремі елементи на зразок тексту. Раз нам потрібно, аби обидві команди виконалися одночасно, як одна, то ставимо лапки на самому початку першою і в самому кінці другої. Таким чином ми показуємо браузеру, що все це одна подія.

Проте нам ще можуть знадобитися одинарні лапки...

Ось що ми отримаємо:

<A HREF="http://www.mail.ru" onMouseOver="document.bgColor='pink', onMouseOver=window.status='Відвідайте MAIL.RU'; return true">Натисніть тут</A>

Таких обробників подій велика кількість, і всі вони прекрасно працюють.

Інші

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

Команда onClick

Ми знаємо, що команда onMouseOver запускає подію, якщо навести курсор на посилання. Аналогічно, клацнувши по посиланню, можна з таким же успіхом запустити подію за допомогою команди onClick.

Таким чином, застосовуючи той же підхід, що і для onMouseOver, отримуємо код:

<A HREF="http://www.mail.ru" onClick="alert('Подивитися пошту!');">Натисніть тут</A>

При клацанні на посилання з'явиться вікно з повідомленням "Подивитися пошту!"

Пам'ятайте, що усередині одинарних лапок не можна вживати слова з апострофами ', інакше браузер зрозуміє їх як закінчення тексту, а це буде помилка.

Команда onFocus

Це чудовий обробник подій, який викликає дію, коли користувач "фокусується" на елементі сторінки. Він працюватиме для елементів форми: прапорців, текстових полів, текстових областей і ін.

Ось приклад:

<FORM>

<INPUT TYPE="text" SIZE="30" onFocus="window.status='Текст у рядку стану';">

</FORM>

При використанні цього сценарію виводиться текстове поле, при клацанні в якому в рядку стану виводиться рядок 'Текст в рядку стану'.

Команда onBlur

Якщо можна направити фокус на об'єкт, значить, можна і "втратити фокус". Обробник подій оnBlur дозволяє повідомити користувача про те, що він змінив свою відповідь. Цей обробник не так часто використовується, але наведемо все-таки приклад.

Створюється текстове поле з текстом. Треба змінити текст і потім клацнути мишею поза полем, імітуючи перехід фокусу до іншого елементу.

Легко здогадатися, як це робиться, ось код:

<FORM>

<INPUT TYPE="text" SIZE="40" VALUE="Впишіть своє ім'я і Натисніть поза текстовим полем" onBlur="alert('Ви змінили відповідь — ви упевнені що він правильний?');">

</FORM>

Команда onChange

Дія цієї команди дуже схоже на дію попередньою, onBlur. Її головне завдання — перевірка. Коли ми ближче познайомимося з формами, це стане зрозуміліше.

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

<FORM>

<INPUT TYPE="text" SIZE="45" VALUE="Змініть текст і Натисніть поза полем — потім перевірте рядок стану" onChange="window.status='Текст був змінений'">

</FORM>

Тобто при зміні тексту в полі і подальшій зміні фокусу в рядку стану виводиться повідомлення 'Текст був змінений'.

Подія onSelect

Ця команда працює так само, як і три попередні, вказуючи, що в полі введення форми сталися зміни. Відмінність полягає в тому, що дана команда реагує, коли в полі введення щось було виділено.

Команда onSubmit

Це дуже популярна команда. Вона дозволяє викликати яку-небудь дію, коли ви натискуєте кнопку Submit (відіслати, відправити). Коли користувач натискує на цю кнопку, команда виведе на екран сторінки текст: "Дякую, що ви нам написали".

Формат команди наступний:

<FORM>

<INPUT TYPE="submit" onSubmit="parent.location='дякую.html'";>

</FORM>

Тут використовуються нові команди. Схема неначе знайома, але якась дивна.

parent.location — це стандартна схема посилання на іншу сторінку. Можна подумати, що parent (джерело) — це об'єкт, а location (місцезнаходження) — метод. Невірно. В даному випадку parent є властивістю вікна браузеру, а location — об'єктом, який повинен з'явитися в цьому вікні. Тобто для ясності просто майте на увазі, що parent.location='' означає посилання.

Команди onLoad і onUnload

Обидві команди поміщаються всередину команди <BODY> документа HTML. Вони викликають подію, коли сторінка відкривається або закривається, тобто коли користувач вирушає із сторінки. Ці команди будуть дуже корисні при роботі з функціями.