Тема: створення програмного проекту простої бази даних «Учні» з даними про прізвище, ім’я, вік та успішність, виведення даних про учнів за зазначеними критеріями.

Мета:

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

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

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

Обладнання: ПК з встановленими ОС та браузером Google Chrome, (дана) інструкція.

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

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

Хід уроку

1. Організаційний момент

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

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

Дати відповіді на запитання.

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

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

Введення даних у документі HTML здійснюють через поле input з підказкою label — див. приклад частини коду для введення прізвища учня:

<label for="surname">Прізвище</label>
<input type="text" name="surname" placeholder="Введіть прізвище учня" id="surname">

Для отримання значення з поля input можна використати власноруч створену функцію addStudent, що починає роботу при натисканні на кнопку з написом Зберегти дані про учня (подія onClick). Виклик функції можна здійснити, наприклад, таким чином:

<input type="button" value="Зберегти дані про учня" id="right_align" 
onClick="addStudent(document.forms[0].elements[1].value,
                    document.forms[0].elements[2].value,
                    document.forms[0].elements[3].value,
                    document.forms[0].elements[4].value)">

Тут кожна з чотирьох змінних document.forms[0].elements[j].value (j = 1, 2, 3, 4 відповідно для отримання таких даних: прізвище, ім’я, вік та успішність) є глобальною змінною та набуває значення, введеного у відповідне поле користувачем після натискання кнопки з написом Зберегти дані про учня. Значення передаються функції у якості параметрів.

Виведення даних можна здійснити за допомогою тегу:

<p id="_id"> Тут буде результат</p>

за його ідентифікатором (у поданому прикладі _id) з використання властивості innerHTML — див. приклад коду функції showAllFooter(), у якому значення змінної i дорівнює кількості записів у базі баних (кількості учнів, при яких зібрано дані).

4. Інструктаж з ТБ
5. Вироблення практичних навичок

Завдання 1. Cтворити програмний проект бази даних «Учні» з даними про прізвище, ім’я, вік та успішність, забезпечити виведення даних про учнів за вказаними критеріями.

Вказівки до виконання (у середовищі текстового редактора)

1. Створити файл index.html з полями для введення даних і кнопками керування роботою бази даних такого вигляду.

   

   Зберегти файл index.html з кодуванням UTF-8 у вказану вчителем теку.

2. Створити файл style.css. Зберегти файл у підтеку css теки, що містить щойно записаний файл index.html, з кодуванням UTF-8.

3. Створити файл js.js. Зберегти файл у підтеку script теки, що містить index.html, з кодуванням UTF-8.

4. Перевірити коректність роботи кодів.

Після введення та збереження даних функцією function save_() (потрібно натиснути кнопку Зберегти дані) буде створено файл BaseStudent.csv, що містить базу даних. Про створення файлу свідчитиме поява напису BaseStudent.csv під кнопкою Зберегти дані — див. малюнок нижче.

При клацанні лівою кнопкою миші по тексту BaseStudent.csv:

• або файл з базою даних буде збережено до теки, вказаної в налаштуванях завантажень браузера;

• або з'явиться вікно діалогу для вибору чи відкриття файлу, чи його збереження.

При наявності файлу BaseStudent.csv незалежно від місця його розташування на комп'ютері користувача, файл можна завантажити до тіла веб-сторінки за допомогою кнопки Вибрати файл і функції readFile().

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

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

Завдання 2. При потребі доробити проект. Удосконалити його, передбачивши можливість упорядкування даних за одним з полів і вилучення окремих записів.

Текст упорядкувала Надія Василівна Дідковська, вчитель школи І-ІІІ ступенів № 132 Голосіївського району міста Києва, на курсах підвищення кваліфікації з 12.11.2018 по 16.11.2018.