Події об'єкта (тега) body onLoad і onUnload

• Обробник події onload прекрасно підходить для ініціалізації всіх інших подій.

• Данное событие добавляется в тег body:

  < body onload = "myFunction()" >

• Аналогічне подія є для ініціалізації функцій при закритті документа - подія onUnload. Подія викликається тоді, коли користувач закриває вікно браузера або вікно конкретної веб-сторінки.

• Замість onUnload сьогодні можна використовувати onBeforeUnload

• Виведення повідомлень при використанні onUnload сьогодні працює тільки в браузері IE

Розглянемо приклад двох варіантів використання події onload в javascript:

Виконання:

1.

Скрипт:

function printText() {
    document. getElementById(" txt1 "). value = "Добрий день!";
}

HTML-код:

< body onload = "printText()" >
< form name = "myForm" >
< input id = "txt1" type = "text" name = "input" value = "" >

Таким чином, при завантаженні веб-сторінки браузером відбудеться виклик функції printText (), яка виведе в текстове вікно текст «Добрий день!»

2.

Скрипт:

window. onload = function() {
    document. getElementById("txt1"). value = "Добрий день!";
}

HTML-код:

< body >
< form name = "myForm" >
< input id = "txt1" type = "text" name = "input" value = "" >

В даному випадку код повністю реалізований в скрипті. Результат буде аналогічний.

Тепер виконаємо завдання. Уважно ознайомтеся з постановкою завдання і її деталізацією, а потім перейдіть до поетапного виконання завдання.

HTML-код:

< img src = "1.jpg" id = "seat0" alt = "" title = seat0 >
< img src = "1.jpg" id = "seat1" alt = "" title = seat1 >
< img src = "1.jpg" id = "seat2" alt = "" title = seat2 >
< img src = "1.jpg" id = "seat3" alt = "" title = seat3 >
< br >
< input type = "button" id = "findseats" value = "Визначити вільні місця" >

// ініціалізація місць
function initSeats() {
 ... .alt = "yes";
 ... .alt = "no";
 ... 
 ... 
}
// функція відображення стану місць: зайнято або вільно
function showSeatStatus(num){
           if (...("seat" + num).alt == "yes")
                  {alert ("вільно")}
           else
                  {alert ("зайнято")}
}

// Пошук вільних місць серед всіх можливих
function findSeats() {
var i = 0;
// Перевіряємо, чи вільно поточне місце
for(i;i<=document.getElementsByTagName("img").length;i++)
          if (...)
          {
          // Виділяємо вільні крісла
                  ... .style.border = "5px #999 solid";
          }
}

window.onload = function() {
          // пов'язуємо функцію findSeats () з подією onclick за допомогою посилання.
          ... .onclick = findSeats;
          // пов'язуємо події onclick зобр. з запуском функції showSeatStatus ()
          ... .onclick = function(){showSeatStatus(0);}
          ...
          ...
          ...
          // запускаємо функцію ініціалізації місць
          ...
};

Об'єкт textarea в javascript

Приклад здійснення доступу до об'єкта textarea в javascript:

< form name = "f1" >
< br >
< textarea name = "yourName" id = "t1" > </ textarea >
</ form >

< script type = "text/javascript" >
document. getElementById("t1"). value = "ім'я"; // 1 спосіб
document.f1.yourName. value = "ім'я"; // 2 спосіб
document.f1.elements[0]. value = "ім'я"; // 3 спосіб
</ script >

Перший варіант є найкращим.

Подія onfocus в javascript: отримання фокусу

Подія onfocus відбувається, коли елемент управління отримує фокус, тобто курсор встановлюється в об'єкт.

Виконання:

Будемо використовувати службове слово this:

...
function selectContents (Obj) {
          Obj.select();
}
...

< body >
< input type = "text" size = "30" onfocus = "selectContents(this)" >
< textarea rows = "3" cols = "50" onfocus = "selectContents(this)" >
</ textarea >

У прикладі обидва об'єкти (textarea і input) мають подія onfocus, яке викликає функцію selectContents (). Як параметр функції передається сам об'єкт (на це вказує службове слово this). У функції викликається метод select для виділення об'єкта

function displayPictures() {
var myWin = window. open("","bigPic"); // open - метод створення і відкриття нового вікна
          mtWin. document. open();
          myWin. focus(); // переносимо фокус в нове вікно
          myWin. document. write("< h1 >Большое фото</h1><img src='Фото026.jpg'>"); // додаємо теги в нове вікно
          myWin. document. close(); // закриваємо вікно
}

...
< a href = "javascript: displayPicture()" >
< img src = "Фото026.jpg" width = "300" alt = "збільшити" >
</ a >

Подія onblur в javascript: втрата фокусу

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

Виконання:

Скрипт:

function (inputField) {
          // Перевірка на наявність тексту
          if (inputField.value.length == 0) {
                    // Повідомляємо користувачеві, що дані не введені
                    alert("Заповніть поле.");
                    return false;
          }
return true;
}

HTML-код:

< form name = "f1" >
Ваше ім'я: < br >
< input type = "text" id = "t1" onblur = "validateNonEmpty(this)" >
< input type = "text" id = "t2" onblur = "validateNonEmpty(this)" >
< input type = "text" id = "t3" onblur = "validateNonEmpty(this)" >
< input type = "text" id = "t4" onblur = "validateNonEmpty(this)" >
</ form >

function checkAll() {
for(var i=1;i<=4; i++){
          ...
          }
}

...
< input id = "b1" type = "button" onclick = "checkAll()" >

При виконанні завдання майте на увазі, що при зверненні до об'єктів через скрипт можливе використання такого імені об'єкта: document.getElementById ('t' + i) - для об'єкта з ідентифікатором .tags-text{t1}, де 1 замінюється на .tags-text{i}.