Практична частина
Вивчіть нижчеподаний скрипт та перевірте його працездатність.
В
икористовуючи
його у якості зразка, напишіть скрипт
для знаходження максимального значення
послідовності із трьох чисел.Напишіть програму для одночасного знаходження мінімального і максимального із трьох заданих чисел.
Напишіть сценарій для обчислення розміру стипендії залежно від оцінок, отриманих під час сесії. Стипендія нараховується за наступними правилами: студентові, що здав іспити на всі оцінки "відмінно", нараховується стипендія в 500 грн.; якщо студент одержав четвірки і п'ятірки (наявність хоча б однієї п'ятірки обов'язково), то йому нараховується стипендія в розмірі 450 грн.; якщо всі оцінки четвірки, то розмір стипендії 400 грн.; в інших випадках стипендія не призначається.
Вдосконалити сценарій п.4, ввівши поле, в якому задається базовий розмір стипендії.
Написати скрипт «Tip of the Day» (Порада дня). Скрипт повинен виводити випадковий рядок («Порада») із заданого масиву рядків. Скрипт розмістити в зовнішньому файлі, підключити його на всі сторінки вашого сайту.
Покажіть виконану роботу викладачеві
Лабораторна робота №8 Динамічний html. Об'єкти JavaScript
Мета роботи: Закріпити і розширити практичні знання з програмування на мові javascript. Отримати уявлення щодо практичного використання об'єктної моделі web-документа (DOM) і використання web -форм..
Контрольні питання:
Елементи керування web-сторінки?
об'єкт document?
Події?
Об'єкт RegExp?
Теоретичні відомості: Елементи керування
Елементи керування - це інтерактивні об'єкти, що дозволяють отримати дані від користувача. Їх призначення і зовнішній вигляд ідентичні елементам інтерфейсу сучасних операційних систем з графічним інтерфейсом (кнопки, поля введення, чекбокси і т.п.).
Елемент input
Тег <input> представляє різні елементи, залежно від значення атрибуту type (таб.8.1).
Таблиця 8.1. - Типи елементів керування (атрибут type)
Значення type |
Опис |
text |
Однорядкове поле введення. Використовуйте атрибути maxlength і size для визначення максимальної довжини, вводиться значення в символах і розміру відображуваного поля введення на екрані (за замовчуванням приймається 20 символів). |
password |
Те ж саме, що і атрибут text, але значення, яке вводиться користувачем приховано символами (зірочки, точки і т.п.). |
checkbox |
Прапорець (маркер множинного вибору). Використовується для позначки вибраних варіантів. |
hidden |
Приховане поле. Не відображається браузером і не дає користувачеві змінювати присвоєні даному полю значення. Це можна зробити тільки програмним шляхом (або зміною значення поля при передачі даних через адресний рядок або в тілі запиту). |
image |
Кнопка-картинка. Дозволяє використовувати графічний малюнок в якості кнопки. Всі значення атрибуту value ігноруються. Сам опис картинки здійснюється через атрибут src і по синтаксису збігається з тегом <img>. |
radio |
Радіокнопка. Дозволяє вводити одне значення з кількох альтернатив. Для створення набору альтернатив вам необхідно створити декілька полів введення з атрибутом type = "radio" з різними значеннями атрибута value, але з однаковими значеннями атрибута name. При виборі одного з полів введення типу radio всі інші поля даного типу з тим же ім'ям (атрибут name) автоматично стануть невибраними на екрані. |
button |
Користувальницька кнопка. Повинна бути запрограмована на обробку натискань. Атрибут value містить текст напису на кнопці. |
submit |
Кнопка відправки даних. При її натисканні буде буде викликаний оброблювач, описаний в заголовку форми (form action = "scriptname", докладніше про теге form - в лабораторній роботі № 8) і йому будуть передані значення всіх елементів, описаних в теге form. Атрибут value містить текст напису на кнопці. |
reset |
Кнопка скидання. При натисканні її всі поля форми приймуть значення, задані за замовчуванням. |
Атрибути елемента input
type - визначає тип поля введення. За замовчуванням дорівнює text.
name - ім'я поля введення. Використовується як ідентифікатор змінної при передачі даних на сервер і для програмного звернення до елементу з скрипта javascript.
id - ідентифікатор елемента. Повинен бути унікальним в межах web-документа.
checked - означає, що checkbox або radio буде обраний.
maxlength - визначає кількість символів, яке користувачі можуть ввести в поле введення. При перевищенні кількості допустимих символів браузер реагує на спробу введення нового символу звуковим сигналом і не дає його ввести.
size - визначає візуальний розмір поля введення на екрані в символах.
src - URL, що вказує на картинку (використовується спільно зі значенням type = "image").
value - значення за замовчуванням або встановлене значення.
Елемент textarea
Тег <textarea> використовується для того, щоб дозволити користувачеві вводити більше одного рядка інформації (багаторядковий текст). При передачі значення з textarea зберігаються всі символи форматування (табуляція, переклад рядка, повернення каретки).
Атрибути, використовувані з тегом <textarea> задають його розміри (в символах і рядках):
rows - висота поля введення в символах
cols - ширина поля введення в рядках
Приклад використання тега <textarea>:
<textarea rows=10 cols=50> 18028 м. Черкаси, вул. Енгельса, 243 </ textarea>
Елемент select
Елемент select відображає на сторінці список вибору, який може бути представлений наступними способами:
select - випадаючий список.
select single - розгорнутий список.
select multiple - список з множинним вибором.
Приклади опису елемента select:
<select name="group">
<option> понеділок, середа, п'ятниця </option>
<option> вівторок, четвер, субота </option>
<option> неділя </option>
</select>
<select single name="group" size="3">
<option> зима </option>
<option> весна </option>
<option> літо </option>
<option> осінь </option>
</select>
Об'єкт document
Об'єкт document це абстрактна структура даних, що представляє повний опис web-сторінки. Набір властивостей і методів цього об'єкту дозволяє управляти як поведінкою web-сторінки цілком, так і окремих її об'єктів (елементів управління, посилань, текстових блоків, зображень і т.д.). Доступ до властивостей і методів реалізований через стандартні програмні інтерфейси (рис. 8.1).
Рис 8.1 - Інтерфейси об'єкта document