1. Що таке мови веб-скриптів?

Веб-скрипти — це невеликі програми, які додають веб-сторінкам інтерактивності. Якщо HTML відповідає за структуру (текст, заголовки), а CSS — за дизайн (кольори, шрифти), то скрипти відповідають за поведінку.

Найпопулярніша мова клієнтських скриптів — JavaScript (JS).

Основні функції скриптів:

• Створення анімацій та ефектів.

• Перевірка даних у формах (наприклад, чи правильно введено email).

• Оновлення вмісту сторінки без її перезавантаження (як стрічка у соцмережах).

• Взаємодія з користувачем (реакція на натискання кнопок, рух миші).

2. Способи використання скриптів у документах

Скрипти інтегруються в HTML-документ двома основними способами:

1. Внутрішній скрипт: Код розміщується безпосередньо всередині HTML-файлу за допомогою тегу <script>.

   HTML

   <script>
    alert('Вітаю на уроці інформатики!');
   </script>
   

2. Зовнішній скрипт: Код пишеться в окремому файлі (з розширенням .js), а в HTML-документі додається лише посилання на нього. Це зручно для великих проєктів.

   HTML

   <script src="myscript.js"></script>
   

3. Створення скриптів за допомогою ШІ

Штучний інтелект (наприклад, Gemini або ChatGPT) значно спрощує написання коду. Замість того, щоб вчити складний синтаксис напам'ять, можна описати завдання звичайною мовою.

Приклад завдання для ШІ (Промпт):

"Напиши простий JavaScript-код для веб-сторінки, який при натисканні на кнопку змінює колір фону сторінки на випадковий."

Результат, який згенерує ШІ:

HTML-частина:

HTML

<button onclick="changeColor()">Змінити колір</button>

JavaScript-частина:

JavaScript

function changeColor() {
 // Генеруємо випадковий колір
 const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
 // Змінюємо фон сторінки
 document.body.style.backgroundColor = randomColor;
}

Як це працює в навчанні:

1. Генерація: Ви отримуєте готовий каркас коду.

2. Аналіз: Ви розбираєте, за що відповідає кожна команда (наприклад, document.body.style звертається до стилів усієї сторінки).

3. Корекція: Ви можете попросити ШІ: "Додай до цього коду анімацію плавного переходу кольору".

Важливо: ШІ — це чудовий асистент, але він може помилятися. Завжди перевіряй логіку виконання скрипту в браузері через "Інструменти розробника" (клавіша F12).

10 запитань, складених на основі матеріалів відеоуроку про роботу з базами даних в Microsoft Access, які допоможуть перевірити розуміння теми учнями 9 класу:

1. Етапи проєктування: Які три ключові параметри необхідно визначити для кожного поля таблиці ще на етапі проєктування бази даних?

2. Вплив типів даних: Як вибір типу даних впливає на роботу бази даних (зокрема на пам'ять та швидкість опрацювання)?

3. Різниця між текстами: У чому полягає основна відмінність між типами даних «Короткий текст» та «Довгий текст» в Access?

4. Обчислювальне поле: Для яких цілей використовується тип даних «Обчислювальний» та як правильно записувати назви полів у виразах для обчислень?

5. Наслідки помилок: До яких наслідків може призвести неправильно обраний тип даних (наприклад, «Текст» замість «Дата/час» для дня народження)?

6. Майстер підстановок: Поясніть призначення «Майстра підстановок». У яких ситуаціях його зручно використовувати?

7. Обмеження в іменах: Які символи заборонено використовувати в іменах полів бази даних?

8. Режим Конструктора: Які додаткові можливості для налаштування полів (наприклад, розмір поля або формат) з'являються у користувача при роботі в режимі «Конструктор»?

9. Обов'язкові поля: Що станеться під час введення даних, якщо для певного поля у властивостях встановлено значення «Обов'язково — Так», але користувач залишив його порожнім?

10. Ключове поле: Чому для ключових полів властивість «Обов'язкове поле» завжди має бути активована?

План сторінки: "Світ крізь точку: Магія центральної симетрії"

1. Вступ: Що це таке? (Простими словами)

• Визначення: Центральна симетрія — це таке перетворення, де кожна точка фігури відображається відносно центру (точки $O$) на таку ж відстань, але в протилежному напрямку.

• Головна фішка: Це те саме, що поворот фігури на 180°. Фігура ніби "перевертається" догори дриґом і задом наперед одночасно.

2. Як впізнати центральну симетрію? (Особливості)

• Центрально-симетрична фігура виглядає однаково, якщо на неї подивитися звичайним чином і "догори ногами".

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

3. Галерея: Центральна симетрія навколо нас (9 прикладів)

Тут я описую, які саме фото варто підібрати та що до них додати у підписі:

🌿 У природі

1. Квітка проліска або нарциса (вид зверху): Центр квітки — це точка симетрії. Пелюстки розташовані парами одна навпроти одної.

2. Сніжинка: Класичний приклад. Кожен промінь сніжинки має свого "двійника" з протилежного боку від центру.

3. Морська зірка (з парною кількістю променів): Якщо провести лінію через центр, кінці променів будуть симетричними.

⚙️ У техніці

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

5. Кермо автомобіля (класичне): Значок бренду в центрі, а елементи керування розташовані так, щоб водію було зручно крутити його на будь-який кут.

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

🏠 У побуті

7. Гральна карта (наприклад, "Дама" або "Король"): Це ідеальний приклад з підручника. Малюнок спеціально зроблений так, щоб карта виглядала однаково, як би ти її не взяв.

8. Циферблат годинника: Точка кріплення стрілок — це центр симетрії для цифр (12 навпроти 6, 9 навпроти 3).

9. Орнамент на килимі або кахлі: Часто використовується "розетка" — візерунок, що розходиться від центру.

4. Інтерактив: "Перевір себе"

• Запитання: Чи має центр симетрії літера "S"? А літера "О"? (Відповідь: так, обидві мають).

• Завдання: Спробуй знайти центр симетрії у звичайному олівці (якщо він не заточений з обох боків, то симетрії немає!).

5. Заключне слово

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

Порада для оформлення:

Для Google Colab або веб-сторінки можна використати яскраві заголовки та рамки для фото. Якщо будеш робити це в Colab, фото можна завантажити через бібліотеку IPython.display.Image.

Тобі допомогти знайти посилання на ці фото чи підібрати координати для малювання якоїсь із цих фігур на Python?

Ваше завдання — створити інтерактивну модель центральної симетрії.

Що потрібно зробити:

1. Придумай фігуру: Це може бути трикутник, чотирикутник або навіть перша літера твого імені, задана координатами вершин $A, B, C, D...$

2. Вибери "центр всесвіту": Нехай це буде точка $O(0, 0)$. Згадай правило: щоб отримати симетричну точку, просто зміни знаки координат на протилежні $(x, y) \to (-x, -y)$.

3. Напиши код: Створи програму на Python (використовуй бібліотеку matplotlib), яка:

   • Малює твою початкову фігуру.

   • Обчислює та малює її симетричну "копію".

   • Додає координатну сітку для точності.

4. Запусти в Google Colab: Перевір, чи правильно твоя фігура "перестрибнула" через центр.

Завдання 1. "Стильний мінімалізм: Створення фавікона"

Мета: Зрозуміти різницю між форматами та навчитися працювати з надмалими форматами (піксель-артом).

• Інструмент: Pixilart або Favicon.io.

• Легенда: Уяви, що ти створюєш власний бренд або блог. Тобі потрібно розробити фавікон — ту саму маленьку іконку, що відображається на вкладці браузера.

• Твоя задача:

  1. Створити малюнок розміром 32x32 пікселі.

  2. Використати лише 2-3 контрастні кольори (щоб на маленькому екрані було зрозуміло, що зображено).

  3. Зберегти результат у форматі .png або .ico.

• Питання на засипку: Чому для фавікона не варто використовувати формат JPEG?

Завдання 2. "Магія векторів: Логотип у стилі Google"

Мета: Освоїти основи векторної графіки (криві, шари, геометричні примітиви).

• Інструмент: Vectr або Figma.

• Легенда: Тобі замовили логотип для нового стартапу "EcoWave". Він має бути сучасним, масштабованим (векторним) і виглядати чітко на будь-якому екрані.

• Твоя задача:

  1. Використовуючи лише прості фігури (кола, квадрати) та інструмент "Перо" (Pen tool), створи абстрактну хвилю або листок.

  2. Навчися групувати об'єкти та змінювати їхній колір за допомогою HEX-кодів (наприклад, #2ecc71 для зеленого).

  3. Експортуй файл у форматі SVG.

• Чому це важливо: Спробуй збільшити свій логотип у 10 разів у редакторі. Чи змінилася якість?

Завдання 3. "Оптимізатор: Битва за швидкість завантаження"

Мета: Навчитися балансувати між якістю зображення та його вагою (важливо для SEO та швидкості сайтів).

• Інструмент: Squoosh.app (сервіс від Google для стискання).

• Легенда: Ти верстаєш головну сторінку сайту. У тебе є круте фото високої якості (наприклад, з Unsplash), але воно важить 5 МБ. Сайт вантажиться вічність!

• Твоя задача:

  1. Завантаж будь-яке якісне фото у Squoosh.

  2. Порівняй різні методи стиснення: WebP, MozJPEG та OxiPNG.

  3. Знайди "золоту середину": стисни фото так, щоб воно важило менше 200 КБ, але візуально не перетворилося на "кашу" з пікселів.

• Результат: Зроби скриншот порівняння "До" та "Після" з показниками розміру файлу у відсотках.

Таблиця форматів для довідки

Щоб тобі було легше орієнтуватися під час виконання, підготував шпаргалку:

Завдання 1. "Стильний мінімалізм: Створення фавікона"

Мета: Зрозуміти різницю між форматами та навчитися працювати з надмалими форматами (піксель-артом).

• Інструмент: Pixilart або Favicon.io.

• Легенда: Уяви, що ти створюєш власний бренд або блог. Тобі потрібно розробити фавікон — ту саму маленьку іконку, що відображається на вкладці браузера.

• Твоя задача:

  1. Створити малюнок розміром 32x32 пікселі.

  2. Використати лише 2-3 контрастні кольори (щоб на маленькому екрані було зрозуміло, що зображено).

  3. Зберегти результат у форматі .png або .ico.

• Питання на засипку: Чому для фавікона не варто використовувати формат JPEG?

Навчальний проєкт: "Цифровий коректор: Аналіз багатства мови"

Мета проєкту

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

 Умова завдання

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

1. Загальна кількість слів у тексті.

2. Кількість унікальних слів (індекс словникового багатства).

3. Пошук найдовшого слова.

4. Перевірка на "букву Ґ": скільки разів у тексті зустрічається ця рідкісна літера.

5. Середня довжина слова (кількість символів без пробілів поділити на кількість слів).

Технічні вимоги (підказки для учнів)

Для виконання проєкту в Google Colab варто використати:

• Функцію input() для введення тексту.

• Метод .split() для розбиття тексту на слова.

• Функцію len() для підрахунку довжини списків та слів.

• Тип даних set (множина), щоб легко знайти унікальні слова.

• Метод .lower(), щоб слова "Мова" і "мова" рахувалися як одне й те саме.

Завдання: «Котик-охоронець»

Напиши скрипт для Рудого кота. Якщо він торкається вказівника миші, то має сказати «Привіт!», інакше — він повинен просто нявкати.

Як скласти код (відповідь):

Для виконання цього завдання тобі знадобиться конструкція «якщо — інакше».

1. Вибери подію: «Коли прапорець натиснуто».

2. Додай цикл «завжди», щоб програма постійно перевіряла умову.

3. Всередину циклу помісти блок «якщо... то... інакше».

4. В «віконце» умови (шестикутник) встав датчик: «торкається вказівник миші?».

5. У першу частину («то») постав команду: «говорити Привіт! 2 сек».

6. У другу частину («інакше») постав команду: «відтворити звук Няв до завершення».

Вигляд коду:

• Коли прапорець натиснуто

• Завжди

  • Якщо торкається вказівник миші? то

    • Говорити [Привіт!] 2 сек

  • Інакше

    • Відтворити звук [Meow] до завершення

Де шукати потрібні команди:

Усі команди в Scratch розділені за кольорами в лівій частині екрана:

1. Події (жовті): блок «Коли прапорець натиснуто».

2. Керування (помаранчеві): блоки «завжди» та «якщо... то... інакше». Це і є наші команди розгалуження та циклу.

3. Датчики (блакитні): блок «торкається вказівник миші?». Він перевіряє умову.

4. Вигляд (фіолетові): блок «говорити... 2 сек».

5. Звук (рожеві): блок «відтворити звук...».