< > ↑ Вгору

Подія javascript onresize об'єкта window

window.onresize = ... ;

Подія onresize об'єкта window відповідально за зміну розмірів вікна браузера. Тому подія і належить об'єкту вікно - window.

Оскільки серед елементів html немає тега, ототожненого з вікном браузера, то обробити в javascript подія onresize можна за допомогою присвоювання функції властивості об'єкта window.

Розглянемо на прикладі:

Приклад: Написати скрипт, який при зміні розміру вікна викликає повідомлення «Розмір вікна змінено!»

Cкрипт:

   window.onresize = message;
   function message () {
      alert ("Розмір вікна змінений!");
  }

або так:

window.onresize = function message () { alert ("Розмір вікна змінений!"); }

HTML-код:

< body> ласка, змініть розмір цього вікна.

Об'єкт javascript, що випадає - select

Об'єкт select - список, що випадає - надає список значень для вибору. Вибір може бути як одного пункту, так і декількох пунктів відразу. Це складний об'єкт, звернення до якого в скрипті відбувається і як до об'єкта select, і як до його пункту option.

Властивості об'єкта select:

  • length - кількість пунктів списку

  • name - ім'я атрибута

  • options [] - масив пунктів

  • selectedIndex - індекс обраного пункту option

  • defaultSelected - обраний пункт option за замовчуванням

  • selected - обраний пункт

Отримати значення списку (select) в javascript можна через властивість value. Але є й інші способи.

Розглянемо приклад:

Приклад: Розмістити випадає з трьох пунктів - міст: Київ, Львів, інший . Після клацання на кнопці отримати значення властивості value обраного option (пункту) списку і вивести його на екран.

HTML-код:

< form name = "f1" >
Місто: < br >
< select name = "town" id = "s1" >
    < option value = "kiev"> Київ </ option >
    < option value = "lviv"> Львів </ option >
    < option value = "other"> інший </ option >
</ select>
< input type = "button" onclick = "f()" value = "ok">
</ form>

Идентификация значения списка:

function f() {
var a = document. getElementById ("s1").value;
alert(a);
}

Завдання js13_1. При зміні пункту списку додавати в текстове поле текст з обраного пункту меню (option).

Детально:

  • Додайте текстове поле і список select з чотирма пунктами option з текстом.

  • У відкриває тег select додайте обробник події onchange.

  • Ототожнити обробник події onchange з функцією, яка змінює текст в текстовому полі (в текстове поле помістіть значення обраного пункту меню).

Додати код:

Cкрипт:

function check ()
{
    document. getElementById ("t1").value = ...;
}

HTML-код:

< input type = "text" id = "t1">
< br>
< select id = "menu1" onchange = "...">
    < option value = "1"> 1 </ option>
    < option value = "2"> 2 </ option>
    < option value = "3"> 3 </ option>
</ select>

Завдання js13_2. Створити сторінку перевірки знань учня з питанням: «У яких одиницях виміру вимірюється робота?» І двома відповідями: «Моль»(неправильний) і «Джоуль» (правильний), виконаними у вигляді елемента меню зі списком ( select). Функцію перевірки запускати одним помахом кнопки.

Розглянемо приклад використання властивості об'єкта select - selectedIndex - обраний пункт option:

Приклад: Виводити в текстове вікно індекс обраної альтернативи:

Автозавод:
  < select name = "s0" onChange = "form.elements [1] .value = selectedIndex;">
      < option> ГАЗ
      < option> ВАЗ
  </ select>
Вибрали індекс: < input type = "text" size = "1" maxLength = "1"> </ form>

В даному прикладі при зміні пункту меню генерується подія onChange. Як значення атрибута onChange виконується скрипт: відбувається звернення до текстового поля через масив елементів форми (текстове поле - це перший елемент масиву, тому що 0-й елемент - це список, що випадає select). Як значення текстового поля вказується номер обраного пункту списку ( selectedIndex).

ОБ'ЄКТ JAVASCRIPT OPTION - ПУНКТ МЕНЮ

Пункт меню select в javascript - option - розглядається як окремий об'єкт зі своїми властивостями:

  • text - рядок тексту, яка розміщується в контейнері LI

  • value- значення, яке передається серверу при виборі альтернативи, пов'язаної з об'єктом OPTION

  • selected - альтернатива обрана ( true / false )

Доступ до конкретного пункту меню відбувається через колекцію (масив) options :

< form name = "f1">
< select name = "s1">
  < option value = "1"> 1 </option>
  < option value = "2"> 2 </option>
  < option value = "3"> 3 </option>
</ select>

Скрипт доступу до першого пункту меню, що випадає (нульовий елемент масиву options):

document.f1.s1.options[ 0 ]. ...

Завдання js13_3. Після клацання на кнопці міняти властивість text і value для першого пункту меню в значення «Харків» . Доповніть код:

Cкрипт:

function myFunc () {
        document.f1.s1.option [ 0 ] .... = ...;
         ...;
}

HTML-код:

< form name = "f1" >
< select name = "s1" >
  < option value = "Харків" > Харків </ option >
  < option value = "Київ" > Київ </ option >
  < option value = "Одеса" > Одеса </ option >
</ select >
< input type = "button" onClick = "...">
</ form >

Розглянемо приклад використання властивості text об'єкта option:

Приклад: При зміні вибору пункту списку в текстове поле виводити текст з обраної альтернативи списку

< form >
< select id = "s1" onChange = "document.getElementById ('t1'). value = document.getElementById ('s1'). options [document.getElementById ('s1'). selectedIndex] .text;" >
   < option > ГАЗ
    < option > ВАЗ
  </ select >
< input type = "text" id = "t1" >
</ form >

Розглянемо ще одне рішення з використанням списку множинного вибору:

Приклад:При зміні списку множинного вибору в текстове вікно виводити індекси обраних альтернатив (встановити для списку атрибут multiple)

< form >
Набір канцелярських товарів:
< select onChange = "form.elements [1] .value = ''; for (i = 0; i <6; i ++) if (form.elements [0] .options [i]. обраний == true) form.elements [1] .value = form.elements [1] .value + i; " multiple >
        < option > Олівці
        < option > Авторучки
        < option > Лінійки
        < option > Зошити
        < option > Ластик
        < option > Кнопки
        < option > Скрепки
  </ select>
Вибрані позиції: < input name = "s1" size = "7" maxLength = "7" > </ form >

Завдання js13_4. Виконайте розглянутий вище приклад, доповнивши його використанням функції.

Властивості outerHTML і innerHTML в javaScript

innerHTML в javaScript - це директива для формування або заміни вмісту будь-якого елементу.

Розглянемо виконаний приклад:

Приклад:Після клацання на абзац (тег p) змінювати вміст текст даного тега

< p onclick = "this.innerHTML = 'змінений текст'" > змінюваний вміст </ p >

outerHTML в javaScript - це директива для формування або заміни вмісту будь-якого елементу разом з самим елементом.

Приклад:Після клацання на абзац (тег p) змінювати вміст текст даного тега і виконувати центрування тексту в ньому

< p onclick = "this.outerHTML = '< p align = center> змінений текст < / p > '" > змінюваний вміст </ p >