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

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

Мета:

По завершенню вивчення учень

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

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

  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-документів з боку клієнта. Ця мова має щонайменше три чудові особливості:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Назва змінної:

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

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

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

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

Hello = 4;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

назвапозначення
інкремент++
декремент--
заперечення!
унарний мінус-
множення*
ділення,
лишок від ділення
/
%
додавання+
віднімання-
порівняння<, >, <=, >=
рівність==
нерівність!=
логічне «і»&&
логічне «або»||
надання значення=, +=, -=, *=,
/=, %=, !=


Всі вказівки програмного коду завершують крапкою з комою.

Можливе місце розташування коду Javascript: як на самій сторінці, так і в зовнішньому файлі.

Код Javascript на сторінці проілюструємо прикладом. Тут і для кожного наступного прикладу перейти за посиланням і переглянути код, вибравши у контексному меню (права кнопка миші) перегляд джерела (коду сторінки). Поданий приклад не є дуже змістовним, але він демонструє:

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

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

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

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

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

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

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

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

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

На самому верхньому рівні знаходиться об'єкт window, що представляє вікно браузера і є «батьком» усіх інших об'єктів. Розташовані нижче об'єкти можуть мати свої підлеглі об'єкти. Наприклад, об'єкт document (поточна сторінка) може мати дочірній об'єкт form (форма).

Всі об'єкти мають методи, які у коді відокремлюють від об'єкта крапкою. Наприклад:

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

Події
Сценарій першого прикладу було виконано негайно після завантаження сторінки. Але у більшості випадків потрібно, щоб сценарій було виконано після певних дій користувача: натискання на кнопку або введення тексту. Інакше кажучи, у відповідь на певну подію. Події й опрацювання подій є істотньою частиною програмування мовою 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 (умова) вказівка1;

або

if (умова) вказівка1 else вказівка2;

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

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

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


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

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

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

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

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

Оператор 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тка. Перша форма оператора лише завершує поточну ітерацію самого внутрішнього з циклів. Друга форма оператора завершає поточну ітерацію самого внутрішнього з циклів із заданою міткою. При цьому перехід до наступної ітерації циклу здійснюється таким чином:

У наступному прикладі змінну 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 {вказівка1} catch (виключення) {вказівка2}

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

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

throw виключення

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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