Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Южноукраинский национальный педагогический университет им. К.Д. Ушинского

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

sukalova / Лабораторная работа_5.odt

Скачиваний:

Добавлен:

23.02.2016

Размер:

52.38 Кб

Скачать

☆

<<< < Предыдущая 1 2 3 4 56 / 66

Розглянимо базові властивості, методи та події, що доступні для різних елементів форми

<input type= 1)submit 2)reset 3)button>	<input type= 1)text 2)password 3)file>	<input type= 1)radio 2)checkbox>	<textarea…>	<select…>
події
onclick onfocus onblur	onclick onkeypress onfocus onblur	onchange onclick onfocus onblur	onclick onkeypress onfocus onblur	onchange onclick onfocus onblur
властивості
value	value	value checked	value	selectedIndex options[i].seleckted options[i].value
методи
Click()	focus(),blur()

 
Детально розглянемо елементи з масиву elements, що утворюються на базі 

<input type=

1) text (це одно строкове поле введення інформації)

2) password (поле для введення пароля)

3) file та <textarea> (поле для вибору файла та багато строкове поле для введення інформації)
 
Базові події, на які реагують об’єкти, що розглядаються.

onclick
onkeypress

В відповідному полі натиснуто кнопку миші.

Кнопкою клавіатури введено новий символ в поле.

onfocus
onblur

Поле активне
З поля знято фокус

 
Базові властивості об’єктів, що розглядаються.

Value

Повертає або встановлює значення відповідного поля форми

 
Базові методи об’єктів, що розглядаються.

focus()

Виклик метода рівнозначний встановленню фокусу на полі

blur()

Виклик метода рівнозначний зняттю фокуса з поля

 
Приклад №1:
1)На подію onblur для поля пароль, вивести в спливаючому вікні значення паролю. 

2)На подію повної загрузки документа, вивести в однострокове поле слова «Ми Вас Вітаємо!!!!», 

3)на подію onclick для однострокового поля введення інформації всю інформацію з цього поля вивести в багатостроковому полі введення інформації

Фаїл pr1.html
 
<html>
<head>
…
<script src=”scripts.js”> </script>
</head>
<body onload=”f1()”>
<form name=”form1”>

</form>

</body>

</html>

Фаїл scripts.js
 
function f1()
{

document.form1.tx1.value=” Ми Вас Вітаємо!!!!”;

}
function f2()
{

alert(document.form1.pas1.value);

}
function f3()
{

document.form1.tx1.value= document.form1.area1.value;

Розглянемо другий варіант рішення попереднього прикладу з використанням фактичного параметру this. Для кожного об’єкту браузера значення this передає в функцію той об’єкт в контексті якого його було викликано. Для кожного елементу форми, а також і для самої форми фактичний параметр form передає в функцію саму форму.

Фаїл pr1.html
 
<html>
<head>
…
<script src=”scripts.js”></script>
</head>
<body onload=”f1(this)”>
<form name=”form1”>

</form>

</body>

</html>

Фаїл scripts.js
 
function f1(x)
{

x.form1.tx1.value=” Ми Вас Вітаємо!!!!”;

}
function f2(y)
{

alert(y.value);

}
function f3(z)
{

z.tx1.value=z.area1.value;

Детально розглянемо елементи з масиву elements, що утворюються на базі 

<input type=

1) checkbox

2) radio> (це чекбокси та радіо кнопки)
 
Базові події, на які реагують об’єкти, що розглядаються.

onchange

Змінився стан об’єкту (з непоміченого став поміченим або наоборот)

onclick

В відповідному полі натиснуто кнопку миші.

Кнопкою клавіатури введено новий символ в поле.

onfocus
onblur

Поле активне
З поля знято фокус

 
Базові властивості об’єктів, що розглядаються.

checked

Повертає ітину, якщо поле помічене та хибу в іншому випадку

value

Повертає або встановлює значення відповідного поля форми

 
Базові методи об’єктів, що розглядаються.

focus()

Виклик метода рівнозначний встановленню фокусу на полі

blur()

Виклик метода рівнозначний зняттю фокуса з поля

 
Приклад №1:
Зробити групу радіо кнопок, за допомогою якої можна вибрати колір фону документа (задіяти 3 варіанти кольорів)
Зробити групу чекбоксів, за допомогою якої можна змінити 1)колір фону документа білий на зелений 2)колір тексту чорний на жовтий 3)колір гіперпосилань синій на червоний

Фаїл pr1.html
 
<html>
<head>
…
<script src=”scripts.js”>
</script>
</head>
<body>
<form name=”form1”>

<input type=”radio” name=”rd1” value=”blue” onclick =”f(this)”>голубий<br>

<input type=”radio” name=”rd1” value=”green” onclick =”f(this)”>зелений<br>

<input type=”radio” name=”rd1” value=”yellow” onclick =”f(this)”>жовтий<br>

<input type=”checkbox” name=”ch1” value=”green” onchange =”g1(this)”>зелений фон<br>

<input type=”checkbox” name=”ch1” value=”yellow” onchange =”g2(this)”>жовтий текст<br>

<input type=”checkbox” name=”ch1” value=”red” onchange =”g3(this)”>гіперпосилка червона<br>

</form>

</body>

</html>

Фаїл scripts.js
 
function f(x)
{

document.bgColor = x.value;

}
function g1(x1)
{document.bgColor=

  (x1.checked)?x1.value:”white”;
}
function g2(x2)
{ document.fgColor=

  (x2.checked)?x2.value:”black”;
 
}
function g3(x3)
{ document.linkColor=

  (x3.checked)?x3.value:”blue”;
 
}

Детально розглянемо елементи з масиву elements, що утворюються на базі 

<select…> (це селект меню або випадаюче меню)
 
Базові події, на які реагують об’єкти, що розглядаються.

onselect

Змінився стан об’єкту (виділили новий options)

onclick

В відповідному полі натиснуто кнопку миші.

Кнопкою клавіатури введено новий символ в поле.

onfocus
onblur

Поле активне
З поля знято фокус

 
Базові властивості об’єктів, що розглядаються.

selectedIndex

Повертає номер вибраного options (нумерація йде з 0)

options[i].seleckted

Властивість повертає істину, якщо відповідний (i-ий) options вибрано і кривду в протилежному випадку

options[i].value

Повертається або встановлюється значення атрибуту value для відповідного options

 
Базові методи об’єктів, що розглядаються.

focus()

Виклик метода рівнозначний встановленню фокусу на полі

blur()

Виклик метода рівнозначний зняттю фокуса з поля

 
Приклад №1:
Зробити випадаюче меню, за допомогою якого можна вибрати колір фону документа (задіяти 3 варіанти кольорів)
Зробити випадаюче меню у вигляді списку з можливістю мультизначного вибору, за допомогою якого можна змінити 1)колір фону документа білий на зелений 2)колір тексту чорний на жовтий 3)колір гіперпосилань синій на червоний

Фаїл pr1.html
 
<html>
<head>
…
<script src=”scripts.js”>
</script>
</head>
<body>
<form name=”form1”>

<option value=”blue” > голубий

<option value=”green” > зелений

<option value=”yellow” > жовтий

</select>

<option value=”green” > зелений фон

<option value=”yellow” > жовтий текст

<option value==”red” > гіперпосилка червона

</select>

</form>

</body>

</html>

Фаїл scripts.js
 
function f(x)
{

document.bgColor = x.options[x.selectedIndex].value;

}
 
function g(x1)
{document.bgColor=

  (x1.options[0].selected)? x1.options[0].value:”white”;
 
document.fgColor=

  (x1.options[1].selected)? x1.options[1].value:”black”;
 
document.linkColor=

  (x1.options[2].selected)? x1.options[2].value:”blue”;
}

Для елементів з масиву elements, що утворюються на базі 

<input type=

1) submit

2) reset
3) button> (це кнопки) характерним є метод click(), що дозволяє «натиснути» кнопку з програми. Остальні події, властивості були вже нами розглянуті для інших елементів форми

<<< < Предыдущая 1 2 3 4 56 / 66

Соседние файлы в папке sukalova

#
23.02.201654.04 Кб6method_name.pdf
#
23.02.201634.76 Кб6Zmist.pdf
#
23.02.2016100.59 Кб5Лабораторная работа1.pdf
#
23.02.201652.38 Кб4Лабораторная работа_5.odt
#
23.02.201634.98 Кб4Лабораторная работа_8.odt