Javascript: створення й використання модулів

Розробка уроку

Тема: створення й використання бібліотек (модулів). Застосовання методу функціональної декомпозиції задачі мовою Javascript.

Мета: ознайомити учнів з основами написання простих сценаріїв з використанням бібліотек. У тому числі з jQuery.

Обладнання: комп'ютери з встановленими ОС та браузерами.

Структура уроку

Організаційний момент
Актуалізація опорних знань
Вивчення нового матеріалу
Інструктаж з ТБ
Закріплення вивченого матеріалу
Підбиття підсумків уроку
Домашнє завдання

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Актуалізація опорних знань

Програму мовою JavaScript можна вставити в будь-яке місце HTML всередині контейнера script. Але зазвичай код Javascript записують в окремий файл, розташування якого вказують як значення атрибута src контейнера <script>. Наприклад, таким чином:

Оголошення типу документа (англійською Document type declaration, Doctype, DTD) — на початку документа тегом <!DOCTYPE>.
Заголовок документа, розташований у межах контейнера <head>, — містить опис загальних технічних відомостей або додаткову інформацію про документ, яку не відтворюють безпосередньо у браузері.
Тіло документа, розташоване у межах контейнера <body> або <frameset>, — містить основну інформацію про опис документа.

Cловник:

Бібліотека — збірка об'єктів чи підпрограм для вирішення близьких за тематикою задач. У залежності від мови програмування бібліотеки містять об'єктні модулі чи сирцевий код та дані для задіяння та інтеграції нових можливостей у програмні рішення.
Сценарій (скрипт) — це програма, яка автоматизує розв'язання деякої задачі. Без скрипта користувач вимушений був би виконувати її вручну за допомогою інтерфейсу програми.
Модуль — функціонально завершений фрагмент програми, оформлений у вигляді окремого файлу з сирцевим кодом або його частини з назвою.
Підпрограма або функція — частина програми, яка реалізує певний алгоритм і дозволяє звернення до неї з різних частин загальної (головної) програми.

3. Вивчення нового матеріалу

jQuery — популярна JavaScript-бібліотека з відкритим сирцевим кодом.

У січні 2006 року у BarCamp NYC її представив Джон Ресіґ (John Resig). Згідно з дослідженнями організації W3Techs, JQuery використовують понад половини з мільйона найвідвідуваніших сайтів.

jQuery є вільним програмним забезпеченням під ліцензією MIT. До вересня 2012 було подвійне ліцензування під MIT та GNU General Public License другої версії.

Динаміку й інтерактивність сайтів реалізують зазвичай використанням мови РНР або з допомогою сценарію мовою Java Script.

Щоб керувати об’єктами, наприклад міняти властивості стилю (колір, розмір символів тощо), потрібно одержати доступ до цих об’єктів. Для цього кожному такому об’єкту надають назву (ідентифікатор) і у відповідний метод (функцію) передають цю назву (ідентифікатор).

Якщо потрібно однакові дії виконати над кількома об’єктами, то потрібно створити колекцію об’єктів і проводити з об’єктами цієї колекції відповідні дії. Створити колекцію об’єктів інколи не просто. Для спрощення цієї роботи використовують бібліотеку jQuery.

Бібліотека jQuery є файлом JavaScript, яка включає всі його DOM (об'єктна модель документа — англійською Document Object Model), події, ефекти і Ajax функції (Asynchronous Javascript And Xml — технологія взаимодії з сервером без перевантаження сторінок). Її можна додати до web-сторінки посиланням (значенням атрибуту src контейнера script) на одну з копій, доступних на публічному сервері, або на локальну копію:

<head> <script type="text/javascript" src="script/jquery-3.3.1.js"></script> </head> Саме так це зроблено у поданих далі прикладах.

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

jQuery(document).ready(сценарій)

Сценарій реалізують функціями:function(список параметрів){тіло функції}

У записі функцій тіло функції записують у фігурних дужках. Функції та вказівки в них розділяють крапкою з комою. Після останньої функції запиту jQuery крапку з комою не ставлять.

Приклади використання сценаріїв Javascript із заміною кольору символів у контейнерах dgreen, dred, dblue (назви довільні) відповідно на зелений, червоний і синій після клацанні на тексті з назвою відповідних кольорів англійською (green, red, blue):

коди html та js без використання jQuery;
коди html та js з використанням jQuery.

Декомпози́ція — метод вирішення проблем, що використовує структуру завдання і полягає у заміні вирішення одного великого завдання вирішенням послідовності менших завдань (нехай і взаємопов'язаних).

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

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

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

Велика кількість рівнів створює враження, що завдання складне. Велика кількість підсистем однієї системи (на одному рівні) спричиняє складність встановлення зв'язків між ними. Зазвичай виділяють 3-6 рівнів.

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

Будь-яке завдання, яке виконують програмісти, — це створення проектів на основі їхньої декомпозиції. Ієрархічна структура робіт (Work Breakdown Structure, WBS) — це інструмент, що дозволяє розбити проект на складові частини. Саме вона встановлює ієрархічно структурований розподіл робіт з реалізації проекту для всіх задіяних в ньому працівників.

У ході побудови WBS здійснюється послідовна декомпозиція проекту на підпроекти — пакети робіт різного рівня, пакети детальних робіт. Декомпозиція повинна бути коректною: елементи будь-якого рівня повинні бути необхідні й достатні для створення відповідного елемента верхнього рівня.

Ієрархічна структура робіт є переліком завдань проекту. Її можна подати графічно або у вигляді опису, що відображає вкладення робіт. Ієрархічна структура робіт організовує і визначає весь зміст проекту. Роботи, не включені у неї, не є роботами проекту.

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

Правила декомпозиції

Правило 8/80: жодне із завдань не повинна мати обсяг менший, ніж 8 чол ∙ год і більший, ніж 80 чол ∙ год. Це становить відповідно від 1 до 10 днів при 8-годинної тривалості робочого дня.
Правило звітного періоду: тривалість кожного завдання не має перевищувати період часу між нарадами, присвяченими розгляду ходу проекту. Наприклад, якщо такі наради проводять щотижня, тривалість виконання кожного завдання не повинно перевищувати одного тижня.
Правило корисності: при дробленні завдання на дрібніші потрібно враховувати, що існують три причини, що зумовлюють доцільність такого поділу:
- дрібнішу задачу, легше оцінити внаслідок меншої тривалості її виконання, а отже, меншою невизначеності;
- дрібніші й конкретні завдання легше розподіляти між окремими виконавцями;
- виконання дрібнішого завдання легше контролювати.
Якщо дроблення не відповідає цим вимогам, від нього потрібно відмовитися.

Ієрархічна структура робіт (WBS) створюють або згори донизу, або знизу догори, або використовують обидва підходи. Зазвичай застосовують «рухому хвилю» — чим віддаленіший за часом той чи інший елемент, тим менше глибина його декомпозиції.

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

Підстави для розбиття проекту:

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

Мистецтво декомпозиції проекту полягає в узгодженні основних структур проекту:

організаційна структура;
структура статей витрат;
структура ресурсів;
функціональна структура;
інформаційна структура;
структура тимчасових інтервалів.

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

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

Правила побудови ієрархічної структури робіт (WBS)

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

Всі елементи WBS описують у словнику. Словник містить короткий опис кожного елемента, що входить в ієрархічну структуру робіт, тобто:

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

На основі WBS будують інші структурні моделі проекту:

структурна модель організації проекту;
матриця розподілу відповідальності;
дерево ресурсів;
дерево вартості;
структурна декомпозиція контрактів за елементами проекту;
мережева модель проекту.

Як правило, для успішного виконання завдання програміст (чи колектив програмістів) вимушений використати декомпозицію до того рівня деталізації, при якому кожну складову можна подати окремим класом чи функцією (процедурою).

На прикладах задач зі шкільного курсу інформатики користь від декомпозиції можна отримати лише на етапі розробки програми. Можливість паралельних (одночасних) обчислень призводить до можливості отримати користь на етапі виконання, підвищивши ефективність розв'язання за часом. Наприклад, у царині векторної алгебри, при використанні різнецевих схем для наближення рівнянь аеро- та гідродинаміки, при розпізнаванні образів. Останнє, крім цивільного застосування, має і військове. Тому надзвичайно актуальними є поняття й міркування, подані далі. Хоча з ними реально зіткнутися як розробник можна лише при роботі у провідних (у цірині інформаційних технологій) організаціях і корпораціях.

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

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

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

Розділяти (сегментувати) можна як обчислювальний алгоритм, так і дані.

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

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

Розмір блоків програми може бути різним. Залежно від розміру блоків вказівок, які виконують паралельно (одночасно), розпаралелення алгоритму може мати різну «зернистість». Її виміром у найпростішому випадку є кількість операцій у блоці. Зазвичай виділяють три ступеня «зернистості» дрібнозернистий, середньоблоковий і великоблоковий:

Паралельність на рівні вказівок — до 20 вказівок на блок, у середньому 5 — найдрібнозернистіший. Кількість підзадач, що паралельно виконують — від однієї до кількох тисяч. Паралельність на рівні циклів. Переважно цикл містить до 500 вказівок. Якщо ітерації циклу незалежні, їх можна виконувати, наприклад, за допомогою конвеєра або на векторному процесорі. Усе це дрібнозернистий паралелізм.
Паралельність на рівні підзадач — середньоблоковий рівень при розмірі блоку до 2000 вказівок. Його втілити важче, бо важче врахувати можливі залежності. Вимоги до комунікацій менші, ніж у випадку паралелізму на рівні вказівок.
Паралельність на рівні програм (задач) — великоблоковий рівень. Він означає виконання незалежних програм на паралельних (різних) комп’ютерах. Такий паралелізм підтримують за допомогою операційної системи.

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

Частини програми (підзадачі) можна виконувати паралельно (одночасно), якщо вони незалежні за даними, за керуванням і за введенням/виведенням:

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

Історичний нарис. У 1974 р. на конгресі ІFІP Глушков виступив із доповіддю про рекурсивні ЕОМ, засновані на нових принципах організації обчислювальних систем (співавтори В.А.Мясніков, І.Б.Ігнатьєв, В.А.Торгашев). Він висловив думку про те, що лише розробка принципово нової не неймановської архітектури обчислювальних систем, дозволить вирішити проблему побудови супер-ЕОМ із необмеженим ростом продуктивності при нарощуванні апаратних засобів. Подальші дослідження показали, що повна і безкомпромісна реалізація принципів побудови рекурсивних ЕОМ і мозкоподібних структур при наявному тоді рівні електронної технології передчасна. Компромісні рішення було знайдено Глушковим і покладено в основу оригінальної структури високопродуктивної ЕОМ, названої макроконвеєром.

Глушков не зміг побачити створені за його ідеями макроконвеєрні ЕОМ ЄС-2701 і ЄС-1766, які не мали аналогів у світовій практиці (за оцінкою Державної комісії, яка приймала роботи). Це були найпотужніші обчислювальні системи на початку 1990-х років. Продуктивність ЄС 1766 при використанні повного комплекту процесорів (256 пристроїв) оцінювали два мільярди операцій на секунду. На жаль, ці потужні й конкурентноспроможні щодо кращих американських ЕОМ комп'ютери було випущено малою серією.

У період з 1990 по 1993 роки понад 90% експлуатованих у СРСР мейнфреймів ЄС ЕОМ було демонтовано й утилізовано з метою вилучення з них дорогоцінних металів (кілька десятків грамів золота і близько одного або декількох кілограмів срібла в одній ЕОМ).

4. Закріплення вивченого матеріалу

Як підключити файл з бібліотекою Javascript?
Що таке jQuery? Як і для чого це використовують?
Провести декомпозицію проекту створення сайту інтернет-магазину електроніки.

5. Підведення підсумків уроку
Виставлення оцінок.

6. Домашнє завдання

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

Текст упорядкувала Українець Поліна Володимирівна, вчитель СШ № 173 Солом'янського району міста Києва, на курсах підвищення кваліфікації з 10.12.2018 по 14.12.2018.