1. Серія контенту:
2. Цей контент є частиною серії: Кінцеві автомати в JavaScript
3. звичайні підказки
4. Лістинг 1. HTML-код для відображення підказок браузером
5. Більш досконалі підказки
6. кінцеві автомати
7. Кінцеві автомати та Виконавча
8. Методична розробка поведінки
9. Про можливості JavaScript
10. Малюємо ескіз графа стану
11. Малюнок 1. Первинний нарис графа станів
12. Малюнок 2. Первинний нарис графа станів, на якому події доповнені діями
13. Малюнок 3. Первісна таблиця станів, відповідна графу станів
14. Малюнок 4. Таблиця станів для віджета FadingTooltip widget після розробки
15. Малюнок 5. Граф станів для віджета FadingTooltip після розробки
16. Лістинг 2. Початковий список змінних станів
17. Все готово для реалізації проекту
18. Ресурси для скачування

Кінцеві автомати в JavaScript

Розробляйте додатки на базі браузера за допомогою JavaScript і кінцевих автоматів

Серія контенту:

Цей контент є частиною # з серії # статей: Кінцеві автомати в JavaScript

https://www.ibm.com/developerworks/ru/views/global/libraryview.jsp?series_title_by=Конечные+автоматы+в+javascript

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: Кінцеві автомати в JavaScript

Слідкуйте за виходом нових статей цієї серії.

У цій статті передбачається, що ви трохи знайомі з JavaScript і хочете краще розібратися в складніших функціях цієї мови.

Протягом декількох років web-дизайнери без особливого пожвавлення використовували інтерпретатори JavaScript в популярних web-браузерах, щоб поліпшити зовнішній вигляд своїх web-сайтів. Найчастіше для цього вони копіювали короткі фрагменти коду в свої web-сторінки. Зараз же, завдяки недавньому поширенню технологій Ajax , Інженери з програмного забезпечення стали, крім того, використовувати JavaScript для розробки нового покоління додатків, які виконуються в web-браузері. Оскільки розмір додатків на основі браузерів стає все більше, то для них все частіше потрібні ті ж шаблони проектування і дисципліна розробки, які характерні для інших середовищ виконання.

Додатки на базі браузерів виконуються в середовищі реального часу, в якій події миші, клавіатури, таймера, мережі та програм можуть відбутися в будь-який момент часу. Коли поведінка керованої подіями програми залежить від порядку, в якому відбуваються події, написання такої програми стає дуже заплутаним, а значить, і більш складним для налагодження та внесення змін. Інженери з програмного забезпечення давно використовують кінцеві автомати в якості організуючого принципу при розробці керованих подіями програм.

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

У цій статті вам буде запропоновано розробити простий додаток-кінцевий автомат в якості вправи, що дозволяє вивчити деякі особливості мови JavaScript:

• Функції - це об'єкти першого рівня: їх можна створювати, призначати змінним і передавати як аргумент, як і будь-які інші об'єкти. Функції можуть бути визначені в інший функції і призначені глобальних змінних або повернуті в якості результату. Такі функції будуть продовжувати існувати після того, як буде повернута функція, яка їх визначає;
• Функції можуть посилатися на будь-яку змінну в своєму лексичному контексті (вкладені фігурні дужки, в які укладено опис функції), такі як локальні змінні функції, які їх визначають. Ці змінні стають частиною замикання функції (функції, її власних змінних та будь-яких змінних, які вона використовує і які визначені де-небудь в її лексичному контексті), і вони також продовжують існувати після того, як буде повернута визначає їх функція;
• Функції можуть зберігатися в асоціативних масивах (масивах, які індексуються по іменах, а не за номерами).

Ці функції надають лаконічний і компактний спосіб організувати дії для подій і переходів між станами, а також витончений спосіб впоратися з відмінностями між моделями обробки подій в браузерах.

Приклад програми, Поступово з'являється і поступово зникає підказка - це більш досконалий елемент, ніж вбудовані підказки більшості браузерів. Підказки, створені за допомогою віджета Fading Tooltip (Поступово з'являється і зникає підказка) використовують анімацію, щоб поступово з'являтися, а потім поступово зникати, замість того, щоб раптово вискакувати і раптово зникати; крім того, вони переміщаються слідом за курсором. Шаблон кінцевого автомата, який використовується для розробки цього поведінки, робить його логіку прозорою. Особливості мови JavaScript, який використовується для реалізації програми, роблять вихідний код компактним і ефективним.

У цій статті показано, як спроектувати поведінку анімованого віджета за допомогою табличного і графічного представлення кінцевого автомата. У наступних статтях серії мова піде про те, як реалізувати табличне представлення кінцевого автомата на мові JavaScript, і що робити з практичними проблемами тестування реалізації віджета в популярних браузерах.

звичайні підказки

Більшість сучасних додатків з графічним інтерфейсом можуть короткочасно відображати маленькі текстові вікна, що містять корисні визначення, інструкції або рекомендації, коли курсор зупиняється над деякими візуальними елементами управління, такими як кнопка, поле вибору або поле введення. Ці корисні текстові вікна отримали назву "balloon help" (спливаючі пояснення) в ранніх системах Apple. У деяких продуктах IBM вони називалися infopops (спливаючі інформацією), а в деяких продуктах Microsoft - ScreenTips (екранними підказками). У цій статті використовується більш загальний термін підказка.

Такі популярні web-браузери, як Netscape Navigator, Microsoft Internet Explorer, Opera і Mozilla Firefox відображають підказки для будь-якого HTML- елемента, який має атрибут title. Наприклад, в лістингу 1 показано три HTML-елемента з атрибутами title.

Лістинг 1. HTML-код для відображення підказок браузером

Here are some <span title = 'Move your cursor a bit to the right, please.'> Fields with built-in tooltips </ span>: <input type = 'text' title = 'Type your bank account and PIN numbers here , please ... 'size = 25> <input type =' button 'title =' Go ahead. Press it. What's the harm? Trust me. ' value = 'Press this button'>

сторінка прикладів показує, як ваш браузер інтерпретує HTML-елементи з атрибутом title. Зверніть увагу, що підказки з'являються і зникають, коли ви переміщаєте курсор над елементами. Текстові вікна містять простий текст без будь-якого форматування або стилю. Вони з'являються після короткої паузи в переміщенні курсора і раптово зникають або після закінчення деякого довільного часу, або після того, як курсор зміститься з HTML- елемента, або після натискання будь-якої клавіші. Браузер ніколи не відображає більш одного текстового вікна за один раз. Вид і поведінку цих підказок жорстко вбудовані в ваш браузер; змінити їх не можна.

Більш досконалі підказки

Вбудовані підказки мають багато можливостей для поліпшень, а останні версії популярних браузерів надають всі вихідні інгредієнти для створення більш досконалих підказок. TML-елемент Division створює текстове вікно, яке можна розташувати в будь-якому вікні браузера. Майже будь-який аспект зовнішнього вигляду цього вікна можна визначити за допомогою каскадних таблиць стилів (CSS). Переміщення курсору, запрограмовані на мові JavaScript, можуть запускати різні дії для будь-яких видимих ​​елементів у вікні браузера. Для організації послідовності цих дій можна програмувати таймери.

На сторінці прикладів показані також деякі HTML-елементи з більш досконалими підказками. Якщо у вас остання версія одного з популярних браузерів, ви можете порівняти досконаліші підказки з вбудованими підказками:

Якщо у вас застарілий браузер, то ви, можливо, не зможете побачити всі аспекти цієї поведінки. Наприклад, в браузерах Opera до версії 9 підказки просто з'являються і зникають, замість того, щоб робити це поступово, тому що в Opera порівняно пізно була додана реалізація властивості стилю opacity (непрозорість). Див. Розділ Ресурси, в якому є посилання для завантаження поточних версій популярних браузерів.

• Вони поступово з'являються, а згодом поступово зникають з поля зору, а не вискакують і пропадають;
• Вони містять текст і зображення, форматування і стиль;
• Коли вони видимі, вони переміщаються разом з курсором;
• Ефект плавного зникнення змінює напрямок на протилежне (з зникнення на появу), коли курсор зміщується з HTML-елемента, і стає звичайним, коли курсор повертається на HTML-елемент;
• Паралельно може відображатися більше однієї підказки, одні з них зникають, поки інші з'являються.

Це вдосконалене поведінку і зовнішній вигляд не є тільки косметичним поліпшенням; воно сприяє підвищенню зручності використання. Коли користувачі потрапляють на сторінки, насичені тисячами елементів, вони можуть не помітити підказки, яка раптово з'являється на екрані. Людський зір, яке особливо чутливо до рухомих об'єктів, з більшою ймовірністю помітить підказку, яка поступово з'являється в поле зору і рухається разом з курсором, навіть якщо увагу розгубленого користувача сфокусовано в іншому місці сторінки. Зображення, форматування і стильове оформлення можуть більш ефективно підносити інформацію, ніж звичайний текст. Крім того, всі параметри цих досконаліших підказок є налаштованим.

Далі в статті розповідається про проектування віджета зникаючої підказки FadingTooltip у вигляді кінцевого автомата. У наступних статтях серії буде розказано про те, як реалізувати і протестувати програму. Якщо вам не терпиться зробити це, в розділі ресурси наводиться посилання на вихідний код на JavaScript, за допомогою якого були створені приклади, описані вище, а також на HTML-сторінку, де вони використовуються.

кінцеві автомати

Кінцеві автомати моделюють поведінку, при якому реакції на майбутні події залежать від попередніх подій. Існує величезний пласт наукової літератури по цій темі (див. Розділ ресурси ), Але зручне робоче визначення дуже просте. Кінцевий автомат - це комп'ютерна програма, яка складається з:

• Подій, на які реагує програма;
• Станів, в яких програма буде перебувати між подіями;
• Переходів між станами при реагуванні на події;
• Дій, які виконуються в процесі переходів;
• Змінних, які містять значення, необхідні для виконання дій між подіями.

Кінцеві автомати найбільш корисні в ситуаціях, в яких поведінка управляється багатьма різними типами подій, а реакція на певну подію залежить від послідовності попередніх подій. Події, які керують кінцевими автоматами, можуть бути зовнішніми по відношенню до комп'ютера і виходити від клавіатури, миші, таймера або мережеву активність, або внутрішніми, що виходять від інших компонентів прикладної програми або від інших додатків.

Стану - це метод запам'ятовування попередніх подій, а переходи - метод організації реагування на майбутні події. Одне з подій має бути позначено як початковий стан. Може існувати також кінцевий стан, але це необов'язково, і у віджета FadingTooltip кінцевого стану немає.

Існує два поширених уявлення кінцевих автоматів:

Орієнтовані графи

Еліпси представляють стану, а стрілки між ними - переходи, над якими вказані події і дії. Двовимірні таблиці Стовпці і рядки представляють події і стани, а осередки містять дії і переходи.

Ці уявлення еквівалентні, але роблять акцент на різних аспектах проекту. Обидва подання корисні і використовуються в даній статті.

Розробка керованих подіями програм за допомогою кінцевих автоматів трохи складніше звичайного процедурного програмування; така розробка вимагає більше дисципліни в загальному і більше проектної роботи зокрема. При хорошому виконанні в результаті можна отримати більш простий програмний код, меншу тривалість тестування та полегшене супровід. Незважаючи на це, складність підходу кінцевих автоматів виправдана не для всіх керованих подіями програм. Якщо, наприклад, діапазон подій невеликий, або дії, що запускаються подіями, завжди одні й ті ж, додаткові витрати ресурсів на розробку можуть не виправдатися.

Кінцеві автомати та Виконавча

Кінцеві автомати управляються подіями і потребують способі прив'язки до подій, про які йде мова, в їх середовищі виконання. Такі прив'язки, які називаються обработчиками подій, являють собою дуже невеликі фрагменти коду, вставлені в середу виконання так, щоб вони могли виконуватися при настанні конкретного події. Для виконання обробники подій потребують такою базовою інформацією:

• Тип початку події (наприклад, переміщення курсору або закінчення часу таймера);
• Контекст події (наприклад, над яким HTML-елементом знаходиться курсор або який мережевий запит виконано);
• Розміщення власних змінних та методів кінцевих автоматів.

Мова JavaScript чудово підходить для побудови керованих подіями кінцевих автоматів. Насправді, JavaScript, можливо, підходить для цього навіть занадто добре - в мові можливі три різні способи прив'язки подій. Кожна з цих моделей подій не відрізняється складністю, проте, щоб програми могли виконуватися в будь-якому популярному браузері, вони повинні реалізувати всі три моделі. Контекст події передається безпосередньо обробникам подій за двома з цих моделей подій; для ще однієї моделі охопити контекст події обробником цієї події дозволяють замикання функцій JavaScript.

JavaScript надає об'єктну модель, яка може здатися дещо незвичній програмістам на Java і C ++, проте, вона повністю придатна для програмування змінних і методів кінцевих автоматів. Крім того, асоціативні масиви JavaScript дозволяють безпосередньо програмувати уявлення кінцевих автоматів у вигляді двовимірних таблиць.

Методична розробка поведінки

Основні інгредієнти для кінцевого автомата - це події, на які він реагує, і стану, в яких він очікує між подіями. Проект повинен передбачати всі можливі події для всіх можливих станів:

• Чи може подія наступити в цьому стані;
• Яке дію слід виконати для обробки подій;
• У який стан буде виконаний перехід після настання події;
• Які змінні слід запам'ятати між подіями.

Почнемо проектування процедури з графа на малюнку 1 , На якому стану показані у вигляді еліпсів, а переходи - у вигляді стрілок, що з'єднують еліпси, і закінчимо таблицею, показаної на малюнку 4 , В якій події і стани перераховуються відповідно в заголовках рядків і стовпців. У кожній клітинці таблиці перераховані дії, які повинні виконуватися, коли в певному стані відбудеться певна подія, або показано, що дана подія не може наступити в даному стані.

Звичайно потрібно кілька ітеративних повторень цієї проектної процедури, щоб отримати граф або таблицю без помилок. Якщо кінцевий автомат має багато подій і станів, то процедура може бути досить стомлюючої, тому від розробника потрібна певна дисципліна, щоб методично працювати над кожною клітинкою таблиці в процесі кожної ітерації. Завдяки цьому ви зможете продумати, яка поведінка бажаєте бачити у всіх можливих ситуаціях. Можливо, ви побачите шляху для подальшого удосконалення або деталізації поведінки, можливо, відкриєте, що знадобиться більше станів, ніж передбачалося спочатку, а може бути, доведеться перетасувати дії між осередками, щоб визначити правильну поведінку в кожній ситуації.

Ця методична процедура проектування кінцевих автоматів виправдана, хоча і втомлює. Заповнена таблиця, яку ви бачите на малюнку 4 , Показує всю логіку поведінки і може бути переведена безпосередньо в програмний код (див. Вихідний код actionTransitionFunctions ).

Про можливості JavaScript

Для розробки віджета FadingTooltip потрібно познайомитися з деякими можливостями мови JavaScript. У дусі проектування зверху вниз, я коротко опишу тут основні ідеї, а подробиці реалізації виділю в наступній статті цієї серії.

Всі популярні браузери здатні передавати події коду JavaScript, коли курсор проходить над HTML-елементом на web-сторінці. Ці події називаються mouseover, mousemove і mouseout; назви показують, що курсор переміщується над, рухається в межах і зміщується за межі HTML-елемента. Браузер передає поточні координати положення курсору разом з цими подіями. При настанні події програма на JavaScript може динамічно створювати HTML-елементи Division, вносити в них текст, зображення і розмітку, і поміщати їх поруч з курсором.

Браузери не мають вбудованих функцій поступового появи і зникнення, але їх можна імітувати, змінюючи ступінь прозорості (ну, насправді, непрозорості, яка протилежна прозорості) елемента Division з плином часу.

В JavaScript є два типи таймерів: разові таймери, які генерують подія timeout після закінчення встановленого часу, і тікери, які генерують події timetick періодично. Для віджету FadingTooltip нам знадобляться обидва цих типу.

Малюємо ескіз графа стану

Почнемо проектування з розгляду базового поведінки, яке потрібно запрограмувати для віджета FadingTooltip. При проходженні курсора над певним HTML -елементом нам потрібно, щоб віджет чекав зупинки курсора над цим елементом. Якщо курсор зупинився над елементом, то віджет повинен, поступово посилюючи, вивести підказку на екран, мить потримати її на екрані, а потім, поступово послаблюючи, видалити її з екрану.

Нашому кінцевому автомату доведеться реагувати на такі події:

• Браузер може передати події mouseover, mousemove і mouseout коду JavaScript відповідно при переміщенні курсору над певним HTML-елементом, в його межах і випадкового зміщення з елемента;
• В JavaScript можна запрограмувати події timeout, щоб сигналізувати, коли курсор затримується на досить тривалий час або підказка відображається досить довго, і події timetick, щоб анімувати збільшення або зменшення непрозорості підказки для імітації поступового появи або зникання.

Ми створимо деякі стану, в яких кінцевий автомат чекатиме між подіями. Давайте назвемо початковий стан віджета Inactive; це такий стан, при якому він буде очікувати активації подією mouseover. У стані Pause віджет буде очікувати, поки подія timeout не покаже, що курсор затримався над HTML-елементом на досить тривалий час. Потім, в стані FadeIn, віджет буде очікувати, поки виконується анімацію ефекту поступового появи подіями timetick, і далі, в стані Display, очікувати настання наступної події timeout. Нарешті, в стані FadeOut віджет буде очікувати, поки виконується анімацію ефекту поступового зникнення наступними подіями timetick. Після цього віджет повертається в стан Inactive, в якому він буде очікувати наступної події mouseover.

на малюнку 1 цей процес відображений у вигляді графа, на якому стану відображені у вигляді еліпсів, переходи у вигляді з'єднують ці еліпси стрілок, а події - як написи над стрілками. Подвійний обведенням виділений еліпс вихідного стану.

Малюнок 1. Первинний нарис графа станів

Віджету FadingTooltip потрібно виконувати деякі дії для кожної події, яке він обробить.

• При настанні події mouseover в стані Inactive йому потрібно буде запустити разовий таймер до того, як перейти до очікування в стані Pause:
• При настанні події timeout віджету потрібно буде створити підказку (з початковою непрозорістю рівною нулю) і запустити тікер до переходу до очікування в стані FadeIn;
• При кожному настанні події timetick йому потрібно буде злегка збільшувати непрозорість підказки. Після досягнення максимальної непрозорості він повинен буде скасувати таймер і запустити інший таймер до переходу до очікування в стані Display;
• При настанні події timeout віджет повинен запустити інший тікер до переходу до очікування в стані FadeOut;
• При кожному настанні події timetick в стані FadeOut віджету потрібно буде злегка зменшувати непрозорість підказки. Після досягнення нульової непрозорості підказки віджет повинен скасувати тікер, видалити підказку і повернутися в стан Inactive, в якому він буде чекати наступної активації іншою подією mouseover.

на малюнку 2 ці дії показані під подіями, які їх запускають.

Малюнок 2. Первинний нарис графа станів, на якому події доповнені діями

Переклад графа стану в таблицю стану

Подання у вигляді графа, показане вище - хороший спосіб почати проектування кінцевого автомата, але уявлення у вигляді таблиці краще підходить для завершення проектування, оскільки дозволяє наочно відобразити всі комбінації подій і станів.

Щоб перевести граф станів в таблицю станів, як заголовки рядків виберіть назви подій, а в якості заголовків стовпців - назви станів. Порядок назв може бути довільним; я помістив початковий стан в перший стовпець, а ініціює подія - в перший рядок. Потім скопіюйте дії і наступний стан для кожної події в відповідну клітинку таблиці, як показано на малюнку 3 .

Малюнок 3. Первісна таблиця станів, відповідна графу станів

Заповнюємо таблицю станів

Щоб завершити проектування нашого кінцевого автомата, необхідно продумати, як заповнити кожну вільну позицію в цій таблиці. Потрібно для кожного осередку вирішити, чи може дана подія відбутися в цьому стані, і якщо може, то які дії повинен виконати віджет в цій ситуації і яким має бути наступний стан. Це втомлива, але абсолютно необхідна фаза процесу проектування.

Порядок заповнення осередків не має значення. Зазвичай до цього кроку в процесі розробки повертаються неодноразово, ще і ще раз продумуючи кожну клітинку, часто переглядаючи її вміст, причому кожен раз по-новому. Нерідкі також додавання (або видалення) станів по ходу процесу, що викликає подальший перегляд. У даній статті я не буду зупинятися на цих ітераціях, підбиваючи підсумок всьому етапу проектування і переглядаючи результати для всіх станів і подій по черзі.

Під час цього стану має настати тільки ініціює подія, яку ми вже розглянули, оскільки подій mousemove і mouseout має передувати подія mouseover, причому жоден таймер не повинен бути запущений. Тому можна написати у всіх інших осередках першого стовпця "не повинно наступити".

Втім, перш, ніж рухатися далі, давайте продумаємо подія mouseover для цього стану на кілька кроків вперед. Коли, врешті-решт, буде створено HTML-елемент Division для підказки, вам буде потрібно помістити його поруч з курсором, тому потрібно зберегти поточний стан курсору, яке браузер передає разом з подією. Крім того, непоганою ідеєю буде скасування всіх запущених таймерів перед запуском нового таймера. Додайте ці дії в осередок mouseover.

Чекаючи, поки закінчиться час таймера, курсор може переміщатися в межах HTML-елемента або зміститися за його межі. Необхідно вирішити, які дії слід виконати, якщо настануть ці події, і яким має бути наступний стан. Якщо в цьому стані настане подія mouseout, вам буде потрібно, щоб віджет FadingTooltip повернувся в стан Inactive state, як якщо б взагалі не проходив над HTML-елементом, але вам доведеться скасувати таймер. Запишіть це дія і перехід в осередок mouseout.

З іншого боку, для події mousemove потрібно, щоб віджет продовжував очікувати зупинки курсора над елементом, для чого необхідно скасувати і перезапустити таймер. Оскільки необхідно, щоб підказка з'являлася поруч з курсором, доведеться оновити збережене положення курсора. При перегляді ви можете зробити так, щоб дії і перехід для події mousemove в стані Pause були такими ж, як для події mouseover в стані Inactive. Замість того, щоб повторювати всю інформацію в обох осередках, запишіть інформацію про повторення прямо в клітинку mousemove. У всіх інших осередках цього стовпчика напишіть "не повинно наступити".

Під час цього стану, в процесі імітації поступового посилення за допомогою подій timetick, курсор може продовжувати переміщатися в межах HTML-елемента. Якщо настане подія mousemove, перемістіть підказку до суміщення з курсором і залиште в цьому стані. Якщо настане подія mouseout, виконайте перехід в стан FadeOut при працюючому тікер, щоб події timetick збільшували непрозорість підказки в порівнянні з поточним значенням. Запишіть ці події і переходи в соответствющая осередки, а в інших осередках цього стовпчика напишіть "не повинно наступити". Стан Display Курсор, безумовно, може продовжувати переміщатися. Якщо він переміщається всередині HTML-елемента, то вам необхідно ту саму дію, що і в стані FadeIn - переміщення підказки до суміщення з положенням курсору. Якщо курсор зміщується за межі HTML-елемента, то виконайте те ж дію і той же перехід, що і для події timeout в стані Display. Відзначте обидва цих повторення безпосередньо в осередках mousemove і mouseout, а в інших осередках напишіть "не повинно наступити". Стан FadeOut Під час цього стану, при імітації поступового зникнення підказки за допомогою подій timetick, курсор може продовжувати переміщатися. Якщо він переміщається в межах HTML-елемента, виконайте те ж дію, що і для станів FadeIn і Display. Якщо миша виходить за межі HTML-елемента, то вам нічого не доведеться робити - тікер буде продовжувати працювати, щоб такі події timetick зменшували непрозорість в порівнянні з поточним значенням, поки воно не досягне нуля.

Чи не вписуйте в цей осередок "не повинно наступити," замість цього вкажіть, що в будь-яких діях немає необхідності, а якщо курсор при переміщенні виявиться знову над HTML-елементом, перемістіть підказку назад до курсора і поверніть віджет в стан FadeIn.

на малюнку 4 показані всі ці додаткові дії і переходи. Осередки, що залишилися порожніми, відповідають ситуації "не повинно наступити".

Малюнок 4. Таблиця станів для віджета FadingTooltip widget після розробки

Табличне представлення кінцевого автомата завжди може бути переведено в графічне, оскільки ці уявлення еквівалентні один одному. на малюнку 5 показано графічне представлення заповненої таблиці.

Малюнок 5. Граф станів для віджета FadingTooltip після розробки

Складання списку змінних стану

Після складання таблиці і графа стану корисно переглянути їх ще раз, щоб скласти список змінних, які автомату потрібно буде запам'ятовувати між подіями, щоб він міг виконувати родинні дії в різних осередках. Нашому кінцевому автомату знадобляться змінні стану для всього, що перераховано в лістингу 2 .

Лістинг 2. Початковий список змінних станів

currentState string value equal to one of the state names currentTimer pointer to timer object, obtained when set, used to cancel currentTicker pointer to ticker object, obtained when started, used to cancel currentOpacity float that varies from 0.0 (invisible) to 1.0 (fully visible ) lastCursorPosition floats obtained from cursor events, used when an HTML Division element is created tooltipDivision pointer to HTML Division element, set when created, used when faded, moved, or deleted

Хоча змінні JavaScript є нетипізований, значення, які вони містять, типізовані (тобто, значення будь-якого типу можуть бути присвоєні будь-якої змінної). У цьому ж дусі я виберу імена для змінних стану і, в примітках, вкажу типи, які я збираюся їм привласнити.

Все готово для реалізації проекту

Тепер у нас є заповнена таблиця станів і список змінних станів, і ми готові реалізувати кінцевий автомат. Не пропустіть таку статтю, в якій розповідається про те, як це зробити. Однак не забувайте, що розробка - це ітеративний процес; можливо, доведеться повернутися до фази проектування ...

Ресурси для скачування

Схожі тими

• оригінал статті Finite state machines in JavaScript, Part 1: Design a widget ;
• Ajax: A New Approach to Web Applications (Ajax. Новий підхід до розробки web-додатків) : Прочитайте статтю Джесса Джеймса Гаррета (Jesse James Garrett), в якій оцінюється технологія Ajax;
• У Книзі JavaScript: The Definitive Guide (JavaScript: остаточні рекомендації) (Девід Фланеген (David Flanagan); кілька разів видавалася видавництвом O'Reilly з 1996 до 2006 року): Ви знайдете вичерпну інформацію про те, як код JavaScript працює в браузерах;
• Standard ECMA-262: ECMAScript Language Specification (Специфікація мови ECMAScript) (Ecma International, 1999 г.): Ознайомтеся з автентичним описом мови JavaScript, реалізованого в популярних браузерах;
• Document Object Model (DOM) Level 2 Events Specification (W3C, 2000 г.): У цій специфікації ви знайдете автентичне опис моделі подій DOM Level 2;
• Gecko DOM Reference (Mozilla) (Довідник по Gecko DOM (Mozilla): Автентичне опис інтерфейсів об'єктів, включаючи події, реалізовані в браузері Firefox;
• HTML and DHTML Reference (Microsoft) (Довідник по HTML і DHTML (Microsoft): Автентичне опис інтерфейсів об'єктів, в тому числі, подій, реалізованих в браузері Internet Explorer;
• Глави 21 "Protocol Representation with Finite State Models" (Подання протоколів за допомогою моделей кінцевих станів) Андре А. С. Данте (Andre AS Danthine) і 25 "Executable Representation and Validation of SNA" (виконуючий уявлення і перевірка коректності SNA) Гері Д . Шульца (Gary D. Schultz) і ін. в книзі Computer Network Architectures and Protocols (Архітектура комп'ютерних мереж і протоколи) (під редакцією Пола Е. Гріна-молодшого (Paul E. Green, Jr.), видавництво Plenum Press, 1982 р .): Ознайомтеся з прикладами з історії кінцевих автоматів, які застосовувалися до мережевих протоколів;
• Глава 3.5 "Finite Automata" (Кінцеві автомати) в книзі Compilers: Principles, Techniques, ad Tools (Компілятори: принципи, методи та інструменти) (Альфред В. Аго (Alfred V. Aho) і ін., Видавництво Addison-Welsley, 1986 м): Прочитайте про те, як кінцеві автомати застосовуються в компіляторах мов програмування;
• Глава 5 "Behavioral Patterns" (Шаблони поведінки) в книзі Design Patterns: Elements of Reusable Object-Oriented Software (Шаблони поведінки: елементи багаторазово використовуваних об'єктно-орієнтованих програм) (Еріх Гамма (Erich Gamma) і ін., Видавництво Addison-Welsley, 1995 г.): Прочитайте про шаблони станів перед тим, як приступити до реалізації кінцевих автоматів.
• Глава 13.25 "TCP State Machine" (Кінцевий автомат TCP) в книзі Internetworking with TCP / IP (Робота в інтернеті з використанням TCP / IP) (Дуглас Е. Комер (Douglas E. Comer), видавництво Simon and Schuster Company, 1995 г. ): Прочитайте, щоб зрозуміти роботу кінцевого автомата, що лежить в основі мережі інтернет;
• Глава 15 "State Machines" (Кінцеві автомати) в специфікації Unified Modeling Language 2.0 Superstructure Specification (Специфікація надбудови Unified Modelling Language 2.0) (Object Management Group, 2004 року): Прочитайте про повну поданні кінцевих автоматів у вигляді графів;
• State Chart XML (SCXML): State Machine Notation for Control Abstraction (Карта станів XML: нотація кінцевого автомата для абстракції управління) (Арджил Оборнєв (RJ Auburn) і ін., W3C): Прочитайте спеціальне подання кінцевих автоматів XML;
• Завантажте наступні браузери для тестування віджета FadingTooltip:
• Знайдіть більше доступних для завантаження файлів в розділі сайту developerWorks Web Development Downloads and products .
• Examples of browser tooltips and FadingTooltip widgets
• HTML source code for examples of browser tooltips and FadingTooltip widgets
• JavaScript source code for FadingTooltip widget

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів