Тема: ВИКОРИСТАННЯ JAVA-СКРИПТІВ ПРИ СТВОРЕННІ HTML ДОКУМЕНТА
При розробці сучасного сайта не завжди можна обійтись лише можливостями мови розмітки HTML. З метою надання веб-сторінкам привабливого вигляду і створення у відвідувача відчуття взаємодії із сайтом використовують додаткові можливості, доступні при використанні Java-скриптів. Діапазон їх застосування досить широкий: це і елементи інтерактивності, які можуть містити складні процедури обробки, і просто декоративні елементи, які надають привабливості сайту. Мова JavaScript була розроблена спільно компаніями Sun Microsystems і Netscape на синтаксичній основі мови Java
Java-скрипт вбудовується в HTML-документ і взаємодіє з ним. Скрипти можуть знаходитись у будь-якому місці HTML-документа. Однак теги HTML не можна вміщувати всередині Java-скрипт-програми Java-скрипт-програма вміщується між тегами <script>...</script>, виняток становлять «обробники подій»
Зустрівши тег <script>, браузер по рядках аналізує зміст документа доти, поки не буде досягнуто тег </script>. Після цього відбувається перевірка скрипта на наявність помилок і компіляція програми у формат, придатний для виконання на комп'ютері користувача.
Головна частина Java-скрипт-програми може бути вміщена у контейнер <head>... </head>, оскільки він зчитується при завантаженні HTML -документа одним з перших. Теоретично скрипт можна вміщувати у будь-якому місці HTML -документа, хоча краще це робити перед тегом <body>... </body>, тобто в заголовку документа.
Синтаксис тега:
<script language=«JavaScript»>
{текст програми}
</script>
Слід мати на увазі, що слово «JavaScript» записується із дотриманням регістру символів. Багато з об'єктів мови JavaScript відповідають тегам, які формують HTML-документи. Деякі об'єкти мови JavaScript мають наслідування. Зокрема, гіпер-зв'язок є об'єктом, який наслідується з об'єкта document. У мові Java-скрипт об'єкти, які наслідуються, також мають назву властивостей. Наприклад, множина гіперзв'язків є властивістю об'єкта document, a links - ім'ям цієї властивості.
ОБ'ЄКТИ
| Password - | поле введення пароля, яке створюється за допомогою тега <input type=password> |
| Radio- | селекторна кнопка (radio button), яка створюється за допомогою тега <input type=radio> |
| Reset - | кнопка перезавантаження, яка створюється за допомогою тега <input type=reset> |
| Select (options [ ]) - | елементи <option> об'єкта <select> |
| Submit - | кнопка передавання даних, яка створюється за допомогою тега <input type=submit> |
| Text- | поле введення, яке створюється за допомогою тега <input type=text> |
| Textarea - | поле тексту, яке створюється за допомогою тега <textarea> |
Важливим елементом мови є події, які використовуються для виконання певних частин
програмного коду скрипта Події і основному ініціюються тими чи іншими дійми користувача Якщо користувач на т иону и певну кнопку, відбудеться подія «Click». Якщо показник мишки перетинає будь-яке посилання у тексті -відбувається подія [MouseOver], Використання мови JavaScript при обробці подій значно розширило можливості мови HTML.
Події поділяються на декілька категорій.
Події, пов'язані з документами (події документа):
завантаження і закриття документів.
Події, пов'язані з гіперзв'язком:
активізація гіперзв'язку.
Події, пов'язані з формою
- натисканий мишкою кнопок;
- одержаний і втрата фокусу введення і зміна вмісту полів введення, областей тексту і списків;
- виділення икоту у полях ваедення і областях тексту.
Події, пов'язані із мишкою:
- наведення вказівника мишки на гіперзв'язок і активізація гіперзв`язку
Події повязані із документами, виникають при завантаженні і закритті декумента, в той час як події гіперзв'язків виникають гри їх активізації або при вміщенні на них вказівника мишки
Нижче наведено імена деяких подій і умови їх виникнення
| Імя події | Атрибут HTML | Умова виникнення події |
| Change | OnChange | Зміна вмісту поля введення чи області тексту або вибір нового елемента списку |
| Click | OnClick | Натиснення мишки на елементі форми або гіперзвязку |
| MouseOver | On MouseOver | Наведення вказівника мишки на гіперзвязок |
| MouseOut | On MouseOut | Наведення вказівника мишки знак закриття документа |
| Select | OnSelect | Виділення тексту у полі введення або області тексту |
| Submit | OnSubmit | Передавання даних форми |
Для забезпечення здійснення події необхідно задати функцію-обробник под». Колекції прикладів Java-скриптів розміщуються на Web-сайтах мережі Інтернет і можуть бути запозичені і використані розробниками Web-сторінок у
власних документах.
ПРИКЛАД (відкриття нового вікна, завантаження в нього документа і закриття вікна):
<html>
<head>
<script language="JavaScripе”>
function opWind()
{
var myUrl =«2.htm»;
myWin=window.open(mylUrl, «windl», «left=0, top==25Q»> «width=400, height=400, resisable=no, scrollbars=no, menubar=no»);
}
</script> </head>
<body>
<input type=«button» value=« Відкрити вікно» onClick=«opWind()»>
<input type=«button» value=« закрити вікно»
onClick=«myWin.close()»>
</body>
</html>