Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
sukalova / Лабораторная работа_5.odt
Скачиваний:
3
Добавлен:
23.02.2016
Размер:
52.38 Кб
Скачать

Приклад №2

На подію «натиснули кнопку миші в межах робочого вікна браузера» змінити колір тексту в документі на зелений, а на подію «подвійний клік миші в межах документу» змінити колір документа на жовтий.

Фаїл pr1.html
 
<html>
<head>
…
<script src=”scripts.js”>
</head>
<body onclick=”f1()” ondblclick=”f2()”>

</body>

</html>
Фаїл scripts.js
 
function f1()
{

document.fgColor=green;

}
function f2()
{

document.bgColor=yellow;

}  

Об’єкти images– це масив рисунків, що підключені до документу за допомогою тегу <img src=”…”>. Додаток7 – це перелік основних методів, властивостей об’єкта images та подій, на які реагує цей об’єкт.

Переглянемо всі способи однозначного звернення до кожного об’єкта в масиві images на основі приклада (*):

<img src=”1.jpg” id=”p1” name=”pic1”>(*)

Спосіб 1: document.images[0] – якщо звертаємось до першого рисунка на гіпертекстовій сторінці (document.images[1] - якщо звертаємось до другого рисунка на гіпертекстовій сторінці  і т.д.)

Спосіб 2: document.images.pic1

Спосіб 3: document.getElementById(‘p1’)

Базові події, на які реагує об’єкт images.
onLoad, onAbort, onError
Повна загрузка рисунка,загрузка перервана, під час загрузки виникла помилка
onMouseDown onMouseUp onClick onDblClick onmouseover onmouseout
Для маніпулятора миш нажато функціональну кнопку, віджато, виповнено один клік, виконано подвійний клік, наїхали на рисунок, з’їхали з рисунку
onKeyDown onKeyUp onKeyPress
Для клавіатури при активному документі виконано натискання кнопки клавіатури, віджато кнопку, виконано клік на кнопку
 
Базові властивості об’єкта images.
src
Адреса рисунку, що відображається
width
Ширина рисунку (не змінюється але считується)
height
Висота рисунку (не змінюється але считується)
 
Приклад №1:
На подію «наїзд на картину» змінити картину, що відображається та змінити колір фону та вивести діалогове вікно, що відображає нову адресу картини, та колір фону документа
 
Фаїл pr1.html
 
<html>
<head>
…
<script src=”scripts.js”>
</head>
<body>
<img src=”1.gif” name=”pic1” onmouseover=”g()”>

</body>

</html>

 
Фаїл scripts.js
 
function g()
{
document.images.pic1.src=”2.gif”;
document.bgColor=”red”;
var str1=’adress=’ + 
document.images.pic1.src + ’фон=’+
document.bgColor;

alert(str1);

} 

Приклад №2

На подію «натиснули кнопку миші на рисунку» вивести діалогове вікно з шириною та висотою рисунка, а на подію «з’їзд миші з рисунку» змінити рисунок, що відображається.

Фаїл pr2.html
 
<html>
<head>
…
<script src=”scripts.js”>
</head>
<body>
<img src=”1.gif” name=”pic1” onclick=”g1()” onmouseout=”g2()”>

</body>

</html>
Фаїл scripts.js
 
function g1()
{
var str2=’ширина=’+
document.images.pic1.width + ‘ висота=’ + document.images.pic1.height;
alert(str2);
}
function g2()
{

document.images.pic1.src=”2.gif”;

Об’єкти links– це масив гіперпосилань, що підключені до документу за допомогою тегу <a href=”URL”> гіперпосилання</a>. Додаток8 – це перелік основних методів, властивостей об’єкта з масиву links та подій, на які реагує цей об’єкт.

Переглянемо всі способи однозначного звернення до кожного об’єкта в масиві links на основі приклада (**):

<a href=”URL” name=”link1” id=”l1”>гіперпосилання</a>(**)

Спосіб 1: document.links[0] – якщо звертаємось до першого гіперпосилання на гіпертекстовій сторінці (document. links [1] - якщо звертаємось до другого гіперпосилання на гіпертекстовій сторінці  і т.д.)

Спосіб 2: document. links. link1

Спосіб 3: document.getElementById(‘l1’)

Базові події, на які реагує об’єкт links.
onLoad, onAbort, onError
Повна загрузка рисунка,загрузка перервана, під час загрузки виникла помилка
onMouseDown onMouseUp onClick onDblClick onmouseover onmouseout
Для маніпулятора миш нажато функціональну кнопку, віджато, виповнено один клік, виконано подвійний клік, наїхали на рисунок, з’їхали з рисунку
onKeyDown onKeyUp onKeyPress
Для клавіатури при активному документі виконано натискання кнопки клавіатури, віджато кнопку, виконано клік на кнопку
 
Базові властивості об’єкта links.
src
Адреса рисунку, що відображається
width
Ширина рисунку (не змінюється але считується)
height
Висота рисунку (не змінюється але считується)
 
Приклад №1:
На подію «наїзд на картину» змінити картину, що відображається та змінити колір фону та вивести діалогове вікно, що відображає нову адресу картини, та колір фону документа
 
Фаїл pr1.html
 
<html>
<head>
…
<script src=”scripts.js”>
</head>
<body>
<img src=”1.gif” name=”pic1” onmouseover=”g()”>

</body>

</html>

 
Фаїл scripts.js
 
function g()
{
document.images.pic1.src=”2.gif”;
document.bgColor=”red”;
var str1=’adress=’ + 
document.images.pic1.src + ’фон=’+
document.bgColor;

alert(str1);

} 

Приклад №2

На подію «натиснули кнопку миші на рисунку» вивести діалогове вікно з шириною та висотою рисунка, а на подію «з’їзд миші з рисунку» змінити рисунок, що відображається.

Фаїл pr2.html
 
<html>
<head>
…
<script src=”scripts.js”>
</head>
<body>
<img src=”1.gif” name=”pic1” onclick=”g1()” onmouseout=”g2()”>

</body>

</html>
Фаїл scripts.js
 
function g1()
{
var str2=’ширина=’+
document.images.pic1.width + ‘ висота=’ + document.images.pic1.height;
alert(str2);
}
function g2()
{

document.images.pic1.src=”2.gif”;

ФОРМА

Об’єкти forms– це масив форм, що побудовано в гіпертекстовому документі за допомогою тегу <form …> … </form>. Додаток9 – це перелік основних методів, властивостей об’єкта з масиву forms та подій, на які реагує цей об’єкт.

Переглянемо всі способи однозначного звернення до кожного об’єкта в масиві forms на основі приклада (***):

<form name=”form1” id=”f1” action=”form_act.php” method=”post”> … </form>(***)

Спосіб 1: document.forms[0] – якщо звертаємось до першої форми на гіпертекстовій сторінці (document. forms [1] - якщо звертаємось до другої форми на гіпертекстовій сторінці  і т.д.)

Спосіб 2: document.form1

Спосіб 3: document.getElementById(‘f1’)

Базові події, на які реагує об’єкт forms.
onsubmit
Подія виникає в момент відправки даних форми на обробку
onreset
Повернення форми в початковий стан
 
Базові властивості об’єкта forms.
elements
Масив елементів форми (textarea, Checkbox…)
method 
 
action 
 
 
Базові методи об’єктів масива forms.
submit()
Виклик метода рівнозначний натисканню на кнопку submit
reset()
Виклик метода рівнозначний натисканню на кнопку reset
 
Приклад №1:
Зробити форму, що ніколи не відправляє даних в програму-обробник (іншими словами в момент відправки даних виконується функція, що пририває процес відправки)
Фаїл pr1.html
 
<html>
<head>
…
<script src=”scripts.js”>
</head>
<body>
<form name=”form1” action=”form1_act.php” method=”post” onsubmit=”ff()”>

<input type=”text” name=”tx1”>

<input type=”submit” name=”sub1”>

</form>

</body>

</html>

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

return false;

} 

Масив elements– це масив об’єктів, що побудовано як поля форми гіпертекстового документу за допомогою тегів <input …>, <textarea>,<select>. Додаток10 – це перелік основних методів, властивостей різних об’єктів з масиву elements та подій, на які реагують ці об’єкти.

Переглянемо всі способи однозначного звернення до кожного з об’єктів в масиві elements на основі приклада (****):

<form name=”form1” id=”f1” action=”form_act.php” method=”post”> (***)

<input type=”…” name=”element1” id=”el1”>

<select name=”select1” id=”sl1”>…</select>

<textarea name=”textarea1” id=”txa1”>…</textarea>

</form>

Спосіб 1: document.form1.elements[0] – якщо звертаємось до першого елемента форми на гіпертекстовій сторінці (document. form1.elements[1] - якщо звертаємось до другого елемента форми на гіпертекстовій сторінці  і т.д.)

Спосіб 2: document.form1.element1

Спосіб 3: document.getElementById(‘el1’)

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