Тема Підготовка сценаріїв і інтерактивність Конструкції ECMAScript 1

Тема. Підготовка сценаріїв і інтерактивність Конструкції ECMAScript 1

Зміст лекції: 1. Масиви. 2. Функції. 3. Об'єкти. 4. Підготовка сценаріїв на стороні клієнта в World Wide Web. 5. Обробники подій. 2

1. Масиви 2. Масив — послідовність індексованих значень. 3. Елемент масиву - окремі значення послідовності. 4. Записується масив: а[0], а[1], а[2], . . . - перший, другий, третій. . . елемент масиву а. 5. а – ім'я масиву, [i] – індекс або номер чарунки, де зберігається елемент масиву. 6. i – ціле число, і 0. 7. Примітка. 8. Індекс починається з нуля, а не з одиниці, хоча звернення йде до першого елемента. 3

Масиви • Довжина масиву не оговорюється. • Номер останнього елементу масиву звичайно не перевищує 232, тобто рівний (232 -1). • Створюється виразом new Array(). • Приклад створення масиву строкових змінних var month = new Array(); month [0] = "Jan"; month [1] = "Feb"; month [2] = "Mar"; 4

• Кількість елементів масиву визначається значенням виразу а. length, тобто а[a. length] – це перший елемент, якому не присвоєне ніяке значення • звернення до всіх елементів масиву • for (var i = 0; i < a. length; ++i) =a[i]; 5

• Приклад обчислення загальної кількості користувачів і середньої кількості користувачів кожного браузера var total_users = 0; for (var i = 0; i < browser_users. length; ++i) total_users += browser_users[i]; var mean_users = total_users/browser_users. length 6

• копіювання масиву, використовуйте цикл, щоб явно привласнити копію кожному елементу, наприклад, так • for (var i = 0; i < a. length; ++i) b[i] = a[i]; 7

2. Функції • Іменований розрахунок, що складається з послідовності команд. • Далі може бути використаний багатократно за визовом по імені. • В ECMAScript • Функції, що визначаються у вихідному тексті за допомогою Function. Declaration чи створюються динамічно за допомогою Function. Expression чи може бути створеною конструктором як об’єкт Function • Вбудовані функції мови такі як parse. Int та Math. exp. 9

Функція як абстракція 10

Синтаксис • Function. Declaration : • function Identifier ( Formal. Parameter. Listopt ) { Function. Body } • Function. Expression : • function Identifieropt ( Formal. Parameter. Listopt ) { Function. Body } • • • Formal. Parameter. List : Identifier Formal. Parameter. List , Identifier • • Function. Body : Source. Elements 11

• function rake_off(amount) • { • var payment; • var commission = amount * 0. 1; • if (commission < 10) • payment = 0; • else • payment = commission; • return payment; • } 12

Приклади • rake_off (11450) • var year_total = 12*rake_off(11450); 13

3. Об'єкти • Програма організована як набір об'єктів, які в сукупності формують модель усього, що реалізовує програма. • Об'єкт складається з набору елементів даних і набору операцій. • ECMAScript звичайно описується як мова, заснована на об'єктах (object-based). 14

• Об'єкт в ECMAScript — це просто набір іменованих елементів даних, називаних властивостями, і функцій (тобто операцій), іменованих методами. Приклади • the_window x_position • the_window close • the_window. close() • the_window. move_to (100, 10) 15

• Math. Pi • 20, 5 Math. SQRT 2 • е Math. E • Sr Math. Pi*r*r • x 1, x 2, y 1, y 2 Math. sqrt(Math. pow(x 2 -x 1, 2)+Math. pow(y 2 -y 1, 2)) 16

Методи та властивості для рядків • “four”. length 4 • Метод char. At • “Video”. char. At(2) “d” • Метод substr • “Video”. substr(1, 3) “ide” • “Video”. substr(-2, 2) “eo” 17

4. Підготовка сценаріїв на стороні клієнта в World Wide Web • Інтерфейс • ECMAScript Web-браузер • document. Element. By. Id(‘opening’) об’єкт зі значенням id рівним ‘opening’ • Метод get. Attribute • paral. get. Attribute(‘id’) 18

document." src="https://present5.com/presentation/25748284_68310726/image-19.jpg" alt="Метод write об’єкта document 19

Dynamically generated content 20

var their_name = prompt (‘Who are you? ’); 21

var their_name = prompt('Who" src="https://present5.com/presentation/25748284_68310726/image-22.jpg" alt="Використання функції prompt 22

23

5. Обробники подій • Обробник подій – забезпечує механізм зв'язку сценарію з подією й елементом документа шляхом застосування засобів HTML. • До них відносяться атрибути, імена яких визначають клас подій, а значення являють собою короткий фрагмент коду, що виконується, коли із цим елементом відбувається зазначену подію. 24

Обробники подій HTML Обробник Дія on. Click Виконано клацання кнопкою миші on. Dbl. Click Виконано подвійне клацання кнопкою миші on. Key. Down Натиснуто клавішу on. Key. Press Клавіша натиснута й відпущена on. Key. Up Клавіша відпущена on. Mouse. Down Натиснуто кнопку миші on. Mouse. Move Курсор перемістився on. Mouse. Out Курсор вийшов від елемента on. Mouse. Over Курсор установлений на елемент on. Mouse. Up Відпущено кнопку миші 25

Зміна зовнішнього вигляду scr об’єкта • function in_image() { • document. images['circlesquare ]. src = 'images/circle. gif'; • } • function out_of_image() { • document. images['circlesquare']. src = 'images/square. gif'; • } 26

" src="https://present5.com/presentation/25748284_68310726/image-27.jpg" alt="Анімація, що керується сценарієм " /> Анімація, що керується сценарієм 27

• • • function start animation() { continuing = true; animate(); } function stop_animation() { continuing = false; } var continuing = false; 28

Функція set. Timeout • set. Timeout (код, затримка в мілісекундах) var delay = 80; var num_frames = 10; var i = 0; Функція animate function animate() { document. images ['the_image']. src = images/animation/frame + (++i) +. gif; if (i = = num_frames) i = 0; if (continuing) set. Timeout('animate()', delay); } 29

Побудова масиву зображень var frames = new Array; for (var j =0; j num_frames; ++j) { frames[j] = new Image; frames [j]. src = 'images/animation/frame' + (j + 1) + '. gif; } 30

Копіювання в масив атрибуту scr document. images['the_image']. src = frames [i++]. src; 31