Тема: мова програмування JavaScript та її середовище програмування.

Мета:

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

• має уявлення про:
  • ієрархію об'єктів у вікні браузера;
  • методи і властивості об'єктів;
  • правила запису інструкцій мовою JavaScript;
  • способи надання значень змінним;
• розрізняє різні оператори мови;
• yміє:
  • створювати найпростіші сценарії мовою JavaScript;
  • розташовувати JavaScript-код на html-сторінці та в окремому файлі;
  • модифікувати текст програми за аналогією.

Обладнання: комп’ютери зі встановленими ОС та браузером, (дана інструкція)

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

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

Хід уроку

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

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

1. Що таке HTML?
2. Що таке HTML-код сторінки? Дані яких типів він містить?
3. Які текстові редактори використовують для написання HTML-коду?
4. Як називають вказівки HTML?
5. Які є типи тегів?
6. Яку структуру має HTML-документ?

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

Мова програмування (англійською programming language) — це система позначень для опису алгоритмів та структур даних.

Мову програмування JavaScript було розроблено фірмою Netscape у співпраці з Sun Microsystems і анансовано у 1995 році. JavaScript призначено для забезпечення інтерактивності html-документів з боку клієнта. Ця мова має щонайменше три чудові особливості:

• повна інтеграція з HTML/CSS;
• прості речі створюють просто;
• підтримувана поширеними браузерами і включена як усталено.

Цих трьох рис одночасно немає у жодній іншій браузерній технології. Тому JavaScript і є найпоширенішим засобом створення браузерних інтерфейсів.

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

Основні галузі використання JavaScript:

• cтворення динамічних сторінок, вміст яких можна змінити після завантаження;
• перевірка до відправлення даних правильності заповнення форм;
• вирішення місцевих завдань за допомогою сценаріїв;
• основа більшості Ajax-застосунків.

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

Зручно використовувати також online середовища програмування.

Будь-яка мова програмування має такі 3 основні складові: абетку, синтаксис (правила написання) і семантику (правила тлумачення й виконання).

Алфавіт мови Javascript включає:

• великі та малі літери латиниці;
• арабські цифри;
• пробіл, символи табуляції, ознака кінця рядка тощо;
• спеціальні символи , . ; : ? ‘ ” ! | / \ ~ ( ) [ ] { } < > # % ^ & - + * =

Літери української абетки можна використовувати лише для запису коментарів.

Коментар — це частина тексту програми для пояснення програми чи окремих вказівок і не впливає на виконання програми.

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

Літерал — стале значення певного типу даних, записане у вихідному коді комп'ютерної програми. Це найпростіший (для сприйняття) вид даних, з якими може працювати програма:

• ціле число, наприклад, 15, +5, -174.

• дійсне число, у якиму цілу частину відділяють від дробової крапкою. Наприклад, 99.15, -32.45. Можлива експоненціальна форма запису, наприклад, 2.73e-7 для запису числа 2,73 ∙ 10^–7;

• логічне значення true (істина) і false (хибність);

• рядок (тексту) — послідовність символів між одинарними або подвійними лапками. Наприклад: "ваше ім'я", 'ваше по батькові'.

Поняття величини є одним з найважливіших понять математики та фізики. Більшість з них є числовими. У програмуванні користуються таким визначенням.

Величина — одиниця даних, якими оперує програма. Вона має такі властивості:

• назва (ідентифікатор) — послідовність літер латиниці, цифр і нижнього підкреслювання «_», на початку — обов'язково літера;

• тип — визначає обсяг відведеної пам'яті, можливі дії, правила тлумачення бітів пам'яті та множину допустимих значень;

• розмірність — проста або складена (структурована);

• значення — елемент множини допустимих значень величини.

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

Змінні — вид даних, значення яких дозволено змінювати протягом виконання програми.

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

Оголошення змінної у JavaScript здійснюють таким чином:

var назва змінної1; // давніший варіант
let назва змінної2;

Відмінності між цими варіантами настільки тонкі, що початківці їх не відчувають. І досі збережено можливість створити змінну наданням значення без використання службових слів var чи let. Але лише за умови відсутності use strict у файлах кодів.

Оголошення сталої у JavaScript здійснюють таким чином:

const назва сталої;

Назва величини:

• має починатися начинаться з літери латиниці або символів "_" чи "$", містити лише літери латиниці, цифри і символи "_" та "$";

• не може збігатися з жодним з таких зарезервированих слів:

  break     case      catch    class     const    continue  
  debugger  default   delete   do        else     enum  
  export    extends   false    finally   for      function
  if        import    in       new       null     return
  super     switch    this     throw     true     try
  typeof    var       void     while     with

Наприклад, test, _test, var _my_test1.

Кожній змінній можна надати значення і при її оголошенні, і далі у коді програми. Оператор надання значення позначають знаком =, що не є знаком порівняння. Наприклад:

var a=15;
var Hello;
Hello = "Привіт!";

Після цього у довільному місці програми змінній Hello можна надати числельну величину, наприклад, так:

Hello = 4;

Тип змінної JavaScript надає лише при наданні змінній певної величини. Після такого надання значення змінної стане доступним навіть якщо змінну попередньо не було оголошено. Змінній можна надати спеціальне значення null, якому не відповідає жоден з типів.

Типи змінних:

• ціле число допускає використання різних форматів запису значення:
  • 25 — запис цілого числа у десятковій системі числення;
  • 0137 — запис цілого числа у вісімковій системі числення;
  • 0xFF — запис цілого числа у шістнадцятковій системі числення;
• дійсне число допускає використання різних форматів запису значення:
  • 386.7 — запис дійсного числа с рухомою десятковою крапкою;
  • 25e5 або 25E5 — запис дійсного числа 25 ∙ 10⁵ в науковій нотації;
• рядок (тексту) — послідовність символів;
• логічні дані, що набувають одного з двох значень: true і false.

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

• String — у рядок;
• Number — у число;
• Boolean — у логічні дані.

Якщо результат виконання операцій з числами не можна подати числом, то повертається величина NaN (від англійського Not a Number).

Вирази утворюють з літералов, назв змінних, знаків операцій і дужок. В результаті обчислення виразу отримують значення, яке може бути числом, рядком або логічним значенням. Наприклад, у виразі a*b: a і b називають операндами, * — знаком операції.

Унарні оператори (для одного аргумента) оператори застосовують для зміни знаку, заперечення, збільшення (інкременту) чи зменшення (декременту):
- — зміна знаку на протилежний;
! — заперечення (логічної змінної);
++ — збільшення на 1 цілої величини змінної;
-- — зменшення на 1 цілої величини змінної.
Перші два оператори записують як префікс (перед операндом), останні два — і як префікс, і як суфікс (після операнда)

Бінарні оператори оператори записують між двома операндами. У мові JavaScript передбачено такі бінарні оператори:
- — віднімання;
+ — додавання;
* — множення;
/ — ділення;
% — лишок від ділення.

Оператори для роботи з окремими бітами:
& — і;
| — або;
^ — або ... або ...;
~ — заперечення.

Оператори зсуву у мові JavaScript такі:
>> — зсув праворуч;
<< — зсув ліворуч;
>>> — зсув праворуч з заповненням звільнених розрядів нулями.

Перелічені оператори зсуву і для роботи з окремими бітами перед визначенням результату перетворюють величини змінних у 32-розрядні (у двійковій системі) цілі числа.

Оператори відношення використовують для порівняння величин змінних. Ці оператори повертають логічні величини true або false залежно від результату порівняння. Їх використовують переважно в умовних операторах. Подамо перелік операторів відношення мови JavaScript з вказанням умови повертання величини true:
> — лівий операнд більший за правий;
>= — лівий операнд не менший за правому;
< — лівий операнд менший за правий;
<= — лівий операнд не більший за правий;
== — величини операндів збігаються;
!= — величини операндів різні.

Логічні оператори:
|| — оператор «або» (логічне «або»), який повертає true, якщо хоча б один з операндів дорівнює true, інакше повертає false;

&& — оператор «і» (логічне «і»), який повертає true, якщо обидва операнди дорівнюють true , інакше повертає false.

Оператор надання величини у мові JavaScript можна використовувати у поєднанні з іншими для зміни величини змінної. Перелічимо всі можливі такі поєднання:
= — звичайне надання величини;
+= — збільшення числової величини або злиття рядків;
-= — зменшення числової величини;
*= — множення;
/= — ділення;
%= — лишок від ділення;
>>= — зсув праворуч;
>>>= — зсув праворуч з заповненням звільнених розрядів нулями;
<<= — зсув ліворуч;
|= — «або»;
&= — «і»;
^= — «або ... або ...».

Наведемо таблицю пріоритетів операцій у порядку спадання пріоритету.

• контейнер <script>…</script>, всередині якого й пишуть код Javascript;
• вказівку document.write() для тексту у поточному документі HTML.

Контейнер <script>…</script> можна розташувати всередині контейнерів:

• <head>…</head>
• <body>…</body>

Перший спосіб вважають прийнятним, другий — поганим тоном.

Браузер без підтримки JavaScript ігнорує тег <script> і відображає усі наступні за ним символи як звичайний текст. Інакше кажучи, у випадку використання архаїчних версій браузерів користувач побачить код JavaScript, вписаним у документ HTML.

Код Javascript у зовнішньому файлі створюють у файлі з розширенням js у середовищі текстового редактора (бажано з підсвіткою тегів) — див. приклад файлів html і js. Надалі ми будемо користуватися саме цим способом, який вважають найзручнішим.

Для відладки частин програм можна використати середовище розробника, яке викликають у вікні браузера, натискаючи клавіші (для кожного браузера свої). Наприклад:

• Ctrl + Shift + J — Google Chrome;



• Ctrl + Shift + K — Mozilla Firefox.

Рядок введення коду позначено таким чином: >> Сигналом до виконання коду є натискання клавіші Enter.

Числені оnline сервіси надають можливість виконувати код Javascript. Наприклад, rextester.com.

У прикладі було використано вказівку document.write("…") з такою структурою:

• document — об'єкт;
• write — метод.

При інтерпретації html-сторінки браузер створює об'єкти Javascript, що утворюють ієрархічну структуру, відображаючи структуру документа:

• document.write — пише текст в поточну сторінку;
• window.open — відкриває нове вікно браузера.

Об'єкти мають властивості, наприклад:

• document.bgcolor — колір тла поточної сторінки;
• document.title — заголовок поточної сторінки сторінки.

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

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

<form><input type="button" value="Приклад з alert"
onClick="alert('Бачиш, що вийшло?')"></form>

У поданому прикладі засобами HTML створено форму з кнопкою. Але є нововведення: onClick="alert('Бачиш, що вийшло')" всередині <input>. Саме цей атрибут визначає відповідь на подію натискання на кнопку з написом "Натисни на мене". Такою відповіддю є виклик alert('Бачиш, що вийшло?'). Зауважимо, що у даному випадку навіть немає потреби використовувати тег <script>.

Функція alert() створює випадні вікна. Викликаючи її, потрібно задати у дужках рядок тексту. У поданому прикладі це 'Бачиш, що вийшло?'. Саме цей текст з'явиться у випадному вікні.

Може здивувати те, що раніше у вказівці document.write() було використано подвійні лапки ("), а зараз у вказівці alert() — одинарні ('). Зазвичай можна використовувати обидва типи лапок. Але у вказівці onClick="alert('Бачиш, що вийшло')" використано обидва типи одночасно. Чому? При використанні лише одного типу лапок неможливо було б визначити, до якої з частин вказівки має відношення функція опрацювання подій onClick, а до якої — не має. Тому використання обох типів лапок у даному випадку вимушене. Не істотньо, у якому порядку використовувати лапки: одинарні всередині подвійних чи навпаки. Інакше кажучи, можна писати й так:

onClick='alert("Бачиш, що вийшло?")'

Наступний код створює випадне вікно, в яке можна ввести послідовність символів.

<form><input type="button" value="Приклад з prompt" 
onClick="var str=prompt('Введіть хоча б один символ','Набирати тут'); alert('Введено: '+str)">
</form>

Починаючи з версії 1.1 мови JavaScript, можна використовувати об'єкт Array, що відповідає математичному поняттю послідовності. Для створення нового порожнього масиву myArray достатньо записати:

var myArray= []

Нумерацію елементів починають з нуля. Номер вказують у квадратних дужках одразу після назви масиву. Елементам масиву можна надати різні за типом значення:

myArray[0]= 2011;
myArray[1]= "ua";

Розмiр масиву встановлюється динамічно. Наприклад, після виконання вказівки:

myArray[2011]= "kiev"

масив myArray містить щонайменше 2012 елементів.

Продовжимо знайомство з можливостями мови Javascript на реалізації базових структур алгоритмів.

Умовний оператор має такий вигляд:

if (умова) вказівка₁;

або

if (умова) вказівка₁ else вказівка₂;

При справдженні умови браузер виконує вказівку₁. Для другої повної форми при хибності умови браузер виконує вказівку₂

Оператор вибору має такий вигляд:

switch (вираз) {
case величина₁: вказівка₁ break;
case величина₂: вказівка₂ break; ...
default: вказівка}

Тут спочатку обчислюють величину виразу. Потім перевіряють, чи немає цієї величини після однієї з міток case. Якщо така мітка є, то виконують вказівку після неї, інакше виконують вказівку після мітки default. Якщо остання відсутня, то переходять до виконання наступної за switch вказівки. Необов'язкова вказівка break вказує: після виконання вказівки керування передати наступній за switch вказівці.

Оператори циклу використовують для багатократного виконання послідовності операторів поки певне вислов­лювання не стане хибним. Схожий на оператори циклу оператор ітерації for…in, який використовують при роботі з об'єктами. JavaScript має 3 форми оператора циклу:

• for (ініціалізація; висловлювання; змiнa) вказівка
  
  Оператор for працює таким чином.

  1. Ініціалізація: лічильникам надають початкове значення.
  2. Встановлюють істинність висловлювання.
  3. При хибності переходять до наступної за for вказівки.
  4. Виконують вказівку.
  5. Виконують зміну лічильника.
  6. Переходять до пункту 2.
  
  Наприклад,
  
  for (var i = 0; i < 10; i++) document.write(i);
  
  виводить усі цифри у порядку зростання без пробілів між ними.

• while (висловлювання) вказівка
  
  Оператор while працює так.

  1. Встановлюють істинність висловлювання.
  2. При хибності переходять до наступної за while вказівки.
  3. Виконують вказівку й переходять до пункту 1.

• do вказівка while (висловлювання)
  
  Оператор do … while працює так.

  1. Виконують вказівку.
  2. Встановлюють істинність висловлювання.
  3. При хибності переходять до наступної за do … while вказівки.
  4. Переходять до кроку 1.

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

Мітки використовують для того, щоб вказати адресу переходу до вказівки чи групи вказівок. Роблять це таким чином:

мітка: вказівка;

Міткою може бути довільна послідовність символів, що може бути назвою змінної (не є зарезервованим словом).

Оператор break перериває виконання поточного циклу, оператора switch або поміченого оператора й передає керування наступному за перериванням оператору. Його можна використосувати лише всередині циклів for, while, do…while або for…in, а також всередині оператора switch. Є дві форми цього оператора: break та break мiтка. Перша форма лише перериває виконання самого внутрішнього циклу, а друга додатково здійснює перехід на задану мітку. Подамо приклад оператора break у тілі функції, що повертає найменший номер елемента масиву, величина якого дорівнює заданій, або кількість елементів масиву, якщо такого елемента немає.

function findValue(a, theValue)
{ for (var i = 0; i < a.length; i++)
  { if (a[i] == theValue) break;
  }
  return i;
}

Оператор continue має дві форми: continue і continue мiтка. Перша форма оператора лише завершує поточну ітерацію самого внутрішнього з циклів. Друга форма оператора завершає поточну ітерацію самого внутрішнього з циклів із заданою міткою. При цьому перехід до наступної ітерації циклу здійснюється таким чином:

• цикли while і do…while перевіряють істинність висловлювання — умови циклу. При істинності починають чергове виконання циклу;

• цикл for здійснює зміну, перевіряють істинність висловлювання — умови циклу. При істинності починають чергове виконання циклу;

• цикл for…in переходить до наступного поля змінної і починає чергове виконання цикла.

У наступному прикладі змінну n знайдено як суму чисел 1, 2, 4 і 5.

var i=0;
var n=0;
while (i<5) {i++; if (i == 3) continue; n += i;}

Оператор for … in виконує задані дії для кожної властивості об'єкта чи для кожного елемента масиву і має такий вигляд:

for (змінна in вираз) вказівка

Оператор for … in діє таким чином:

1. Змінній надають назву чергової властивості об'єкту чи чергового елемента масиву (залежно від природи виразу).

2. Виконують вказівку.

3. Переходять до кроку 1.

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

Оператор try … catch використовують для опрацювання такого виключення. Він має такий вигляд:

try {вказівка₁} catch (виключення) {вказівка₂}

Тут виключення — довільна назва змінної, вказівка₁ — містить код, що може спричинити виключення. Якщо виключення не відбулося, то після виконання вказівки₁ здійснюють перехід до наступної за try…catch вказівки. Інакше інформацію про виключення зберігають як величину локальної змінної виключення, а керування передають вказівці₂, яка має містити код опрацювання цього виключення. Якщо виключення неможливо на даному рівні опрацювати, то вказівка₂ має містити вказівку throw для переходу до опрацювання виключення на вищому рівні.

Оператор throw породжує виключення, яке вже можна опрацювати оператором try…catch. Він має такий вигляд:

throw виключення

Тут виключення — довільний вираз, величину якого надають локальній змінній, вказаній в операторі catch. Див. приклад породження й опрацювання виключення, у якому при заміні 7 на 77 замість слова «July» побачимо: «Invalid month number».

Функції
У багатьох випадках функції є способом зв'язати разом кілька вказівок для того, щоб зручним для себе чином викликати їх з різних рядків коду. Зазвичай функції описують у розділі заголовку документу HTML, виділеного контейнером <head>…</head>. Функцію потрібно означити перед викликом. Розташування всіх означень функцій саме в розділі заголовку документу HTML гарантує доступ до цих функцій при опрацюванні документу.

Загальний вигляд опису (означення) функції

function назва ([параметр1] [,параметр2] [… , параметрN])
{ вказівки тіла функції
  [return вираз]
}

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

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

Оператор return має дві форми:

• return вираз повертає величину виразу. Функцію з таким оператором викликають як частину оператора надання значення;

• return повертає величину undefined. Функцію з таким оператором викликають тоді, коли потрібно виконати певні дії без повернення значення.

Якщо тіло функції не містить оператора return, то функція повертає величину undefined.

Див. приклад багатократного друку рядка тексту.

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

4. Інструктаж з ТБ
5. Закріплення вивченого матеріалу

Завдання 1. Відповісти на питання:

1. В чому унікальність мови JavaScript?
2. Як проглядати код JavaScript?
3. Що таке літерал?
4. Назвіть властивості величини.
5. Назвіть типи змінних JavaScript.
6. Назвіть або опишіть події, які опрацьовує JavaScript.
7. Як реалізують галуження мовою JavaScript?
8. Як реалізують повторення мовою JavaScript?
9. Як описують функцію мовою JavaScript?

1. Повторити вивчений матеріал.

2. Написати програму виведення двоцифрових натуральних чисел, що не мають простих дільників, відмінних від 2, 3 і 5 (числа Хеммінга).

Текст упорядкувала Шугаєвська Людмила Володимирівна, вчитель інформатики Технічного ліцею Шевченківського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 22.10.18 р. по 26.10.18 р. В роботі використані матеріали сайту «Київські учнівські олімпіади з інформаційних технологій і вивчення інформатики».