Добавил:

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

Вуз:

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

Предмет:

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

Файл:

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

Скачиваний:

Добавлен:

23.02.2016

Размер:

52.38 Кб

Скачать

☆

<<< < Предыдущая 1 2 3 45 / 65 6 > Следующая >>>

Приклад №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()”>

</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”> (***)

</form>

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

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

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

<<< < Предыдущая 1 2 3 45 / 65 6 > Следующая >>>

Соседние файлы в папке 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