Перейти до основного вмісту

Публікації

Показано дописи з лютий, 2022

Веб-сторінка як мольберт. Учимося малювати

Як правило, зображення на веб-сторінку вставляють уже готовим: прописується відповідний тег <img> і додається його адреса. На тому і все. Але може скластися така ситуація, коли зображення не є художньо складним, але при цьому повинне бути інтерактивним, коли його потрібно змінювати в залежності, наприклад, від даних, які вносить користувач на сторінці. У цьому випадку "намалювати" простеньку картинку можна одразу на веб сторінці засобами Java Script. Розберемося, як це робиться. Перш за все потрібно підготувати місце для малювання. Таким "мольбертом" на веб-сторінці є спеціальне поле canvas ( з англ. - полотно ). Створення полотна За замовчуванням елемент canvas створює прямокутну область, яка не має ані власного контенту, ані рамок. Основними атрибутами цього елементу є ширина і довжина, якщо вони спеціально не оголошені, то розмір полотна тоді буде 300 рх на 150 рх. Для розміщення полотна на веб-сторінці записуємо такий код: <body>     <center&g

Створення інтерактивної веб-сторінки, що містить форму

Наявність на вашому сайті форми, за допомогою якої користувач може виконати якісь обчислення, є досить зручним компонентом. Такі форми розміщують не тільки на спеціалізованих математичних сайтах типу formula.co.ua , а й, наприклад, на сайтах банків , для попереднього прораховування клієнтом свого депозиту або ж таким прикладом є  пенсійний калькулятор на сайті Пенсійного фонду України. Насправді, створити такий калькулятор не дуже складно. Потрібна тільки форма і трохи JavaScript. Отже, створимо для прикладу простенький калькулятор, за допомогою якого можна буде розв'язати квадратне рівняння за його коефіцієнтами. Наша інтерактивна веб-сторінка потребуватиме двох файлів: власне, html-сторінка, на якій буде розміщено форму, і js-файл з програмним кодом скрипта, що виконуватиме обчислення. Розробка форми Для розміщення форми веб-сторінці є спеціальний парний тег <form> , яким позначається початок і кінець її розташування: <!DOCTYPE html> <html lang="en">