- Подія javascript onresize об'єкта window
- Об'єкт javascript, що випадає - select
- Об'єкт javascript option - пункт меню
- Властивості outerHTML і innerHTML в javaScript
На уроці розглядається робота в javascript з списком, що випадає select і окремими пунктами списку. Розбирається подія onresize об'єкта window і властивості об'єктів outerHTML і innerHTML в javaScript
Подія javascript onresize об'єкта window
Подія onresize об'єкта window відповідально за зміну розмірів вікна браузера. Тому подія і належить об'єкту вікно - window.
Оскільки серед елементів html немає тега, ототожненого з вікном браузера, то обробити в javascript подія onresize можна за допомогою присвоювання функції властивості об'єкта window.
Розглянемо на прикладі:
Приклад: Написати скрипт, який при зміні розміру вікна викликає повідомлення «Розмір вікна змінено!»
Скрипт: window. onresize = message; function message () {alert ( "Розмір вікна змінений!"); }
window.onresize = message; function message () {alert ( "Розмір вікна змінений!"); }
або так:
window. onresize = function message () {alert ( "Розмір вікна змінений!"); }window.onresize = function message () {alert ( "Розмір вікна змінений!");}
HTML-код:
<Body> ласка, змініть розмір цього вікна.<Body> ласка, змініть розмір цього вікна.
Об'єкт javascript, що випадає - select
Об'єкт select - список, що випадає - надає список значень для вибору. Вибір може бути як одного пункту, так і декількох пунктів відразу. Це складний об'єкт, звернення до якого в скрипті відбувається і як до об'єкта select, і як до його пункту option.
Властивості об'єкта select:
- length - кількість пунктів списку
- name - атрибут name
- options [] - масив пунктів
- selectedIndex - індекс обраного пункту option
- defaultSelected - обраний пункт option за замовчуванням
- selected - обраний пункт
Отримати значення списку (select) в javascript можна через властивість value. Але є й інші способи.
Розглянемо приклад:
Приклад: Розмістити випадає з трьох пунктів - Горо: Москва, Санкт-Петербург, інший. Після клацання на кнопці отримати значення властивості value обраного option (пункту) списку і вивести його на екран
HTML-код: <form name = "f1"> Місто: <br> <select name = "town" id = "s1"> <option value = "msk"> Москва </ option> <option value = "spb" > Санкт-Петербург </ option> <option value = "other"> інший </ option> </ select> <input type = "button" onclick = "f ()" value = "ok"> </ form>
<Form name = "f1"> Місто: <br> <select name = "town" id = "s1"> <option value = "msk"> Москва </ option> <option value = "spb"> Санкт-Петербург </ option> <option value = "other"> інший </ option> </ select> <input type = "button" onclick = "f ()" value = "ok"> </ form>
Ідентифікація значення списку:
function f () {var a = document. getElementById ( 's1') .value; alert (a); }function f () {var a = document.getElementById ( 's1'). value; alert (a); }
Завдання js13_1. При зміні пункту списку додавати в текстове поле текст з обраного пункту меню (option).детально:
- Додайте текстове поле і список select з чотирма пунктами option з текстом.
- У відкриває тег select додайте обробник події onchange.
- Ототожнити обробник події onchange з функцією, яка змінює текст в текстовому полі (в текстове поле помістіть значення обраного пункту меню).
Доповніть код:
Скрипт: function check () {document. getElementById ( 't1') .value = ...; }
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><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>Автозавод: <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><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]. ...document.f1.s1.options [0]. ...
Завдання js13_3. Після клацання на кнопці міняти властивість text і value для першого пункту меню в значення «Ростов-на-Дону». Доповніть код:
Скрипт: function myFunc () {document. f1 .s1 .options [0] .... = ...; ...; }
function myFunc () {document.f1.s1.options [0] .... = ...; ...; }
HTML-код:
<Form name = "f1"> <select name = "s1"> <option value = "Ростов Дон"> Ростов-Дон </ option> <option value = "Володимир"> Володимир </ option> <option value = " Москва "> Москва </ option> </ select> <input type =" button "onClick =" ... "> </ form><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><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]. selected == true) form.elements [1] .value = form.elements [1] .value + i; " multiple> <option> Олівці <option> Авторучки <option> Лінійки <option> Зошити <option> Стерки <option> Кнопки </ select> Обрано позиції: <input name = "s1" size = "7" maxlength = "7" > </ form> <Form> Набір канцелярських товарів: <select onChange = "form.elements [1] .value = ''; for (i = 0; i <6; i ++) if (form.elements [0] .options [i]. selected == true) form.elements [1] .value = form.elements [1] .value + i; " multiple> <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><P onclick = "this.innerHTML = 'змінений текст'"> змінюване вміст </ p>
outerHTML в javaScript - це директива для формування або заміни вмісту будь-якого елементу разом з самим елементом.
приклад:
Приклад: Після клацання на абзац (тег p) змінювати вміст текст даного тега і виконувати центрування тексту в ньому
<P onclick = "this.outerHTML = '<p align = center> змінений текст </ p>'"> змінюване вміст </ p><P onclick = "this.outerHTML = '<p align = center> змінений текст </ p>'"> змінюване вміст </ p>
