Використання сценаріїв на сайті - підручник для веб-майстра
Розділ: Підручники / Підручник з HTML
Документ може містити кілька тегів обов'язково, незалежно від того, задані чи ні оператори всередині тегу. Наступний фрагмент коду пов'язує документ HTML з файлом-джерелом, який містить деякий набір функцій:
Зовнішній файл, що зв'язується, не повинен містити тегів HTML і повинен мати розширення JS.
Оператори всередині тега
Нехай визначена змінна barwidth, і їй надано значення 75. Наступний тег намалює горизонтальну лінію завдовжки 75% від горизонтального розміру вікна браузера:
приречена на провал. Замість очікуваного значення змінної myVar браузер відобразить рядок myVar.
Події здебільшого пов'язані з діями, що виробляються користувачем з елементами форм HTML. Тому найчастіше перехоплення та обробка подій визначається параметрами елементів форм, що дозволяє перевірити введену інформацію перед її відправкою на обробку CGI-сценарієм.
Параметри, що передаються функції, розділяються комами. Необов'язковий оператор return у тілі функції (блок операторів, укладений у фігурні дужки), визначає значення, що повертається функцією.
Визначення необхідних функцій слід здійснювати в тезі , оскільки всі певні оператори сценарію інтерпретуються до відображення сторінки, і, таким чином, будуть відомі в процесі відображення всієї сторінки.
Наступний приклад демонструє завдання функції та її виклик у процесі формування сторінки документа.
Приклад 9.1.Завдання функції та її виклик
Починається відображення сторінки, на яку впроваджено сценарій обчислення функції
Тепер формування сторінки закінчено.
У тегу задано опис функції square(), яка повертає квадрат значення свого параметра,а також відображає вікно повідомлення. Виклик функції здійснюється у сценарії, розміщеному у тілі HTML-документа. У цьому сценарії використовується метод write об'єкта document для формування виведення HTML-сторінку.
Під час завантаження цього документа в браузер Internet Explorer відображається перший абзац, а потім виводиться вікно повідомлення, як на рис. 9.3.
Мал. 9.3.Відображення вікна повідомлення
Натискання кнопки ОК закриває вікно повідомлення, і продовжує відображення сторінки. Остаточний вигляд отриманої сторінки можна побачити на рис. 9.4.
Мал. 9.4.Динамічно сформована сторінка
Наступний приклад демонструє явний виклик функції зі сценарію. Стилем хорошого програмування, однак, є неявний виклик функцій через параметри обробки подій елементів форм.
Приклад 9.2 .Прийом явного виклику функції зі сценарію
У цьому прикладі обробник події onclick кнопки форми пов'язаний з викликом функції validate, якою передається значення, введене в текстове поле age. Ім'я поля визначається параметром name. При натисканні на кнопку викликається функція validate, яка відображатиме повідомлення залежно від введеного значення.
На рис. 9.5 показаний результат взаємодії із завантаженою у браузер сторінкою.
Мал. 9.5.Результат взаємодії з кнопкою форми HTML
є прикладом мови вільного використання типів. У ньому не обов'язково ставити тип змінної. Її тип залежить від типу даних, що зберігаються в не£, причому при зміні типу даних змінюється і тип змінної.
- Цілий
- Речовий
- Рядковий
- Булевий, чи логічний
Для надання змінним значень основних типіввикористовуються літерали - буквальні значення даних відповідних типів.
Цілі літерали є послідовністю цифр і є звичайними цілими числами зі знаком або без знака:
123 // ціле позитивне число
-123 // ціле негативне число
+ 123 // ціле позитивне число
Для завдання речових літералів використовується синтаксис чисел з десятковою точкою, що відокремлює дрібну частину числа від цілої, або запис дійсних чисел у науковій нотації із зазначенням після символу "е" або "Е" порядку числа. Приклад правильних дійсних чисел:
| 1.25 | 0.125е01 | 12.5Е-1 | 0.0125Е+2 |
Рядковий літерал - послідовність алфавітно-цифрових символів, укладена в одинарні (') або подвійні лапки ("), наприклад: "Анна", 'АННА'.
При заданні рядкових змінних не можна змішувати одинарні та подвійні лапки. Неприпустимо задавати рядок, наприклад, у вигляді "Ганна'.
Подвійні лапки — це один самостійний символ, а не послідовність двох символів одинарних лапок.
Якщо у рядку потрібно використовувати символи лапок, то рядковий літерал необхідно укладати в лапки протилежного вигляду:
"It's a string" // Значення рядка дорівнює It's a string
Булеві літерали мають два значення: true та false, і використовуються для обробки ситуацій так/ні в операторах порівняння.
Кожна змінна має ім'я, яке має починатися з літери латинського алфавіту, або символу підкреслення "_", за якими слідує будь-яка комбінація алфавітно-цифрових символів або символів підкреслення. Наступні імена є допустимими іменами змінних
Визначити змінну можна двома способами:
- Оператор var
- Оператором присвоєння (=)
Оператор var використовується як для завдання, так і ініціалізації змінної і має синтаксис:
var ім'я_змінної [= початкове_значення];
Необов'язковий оператор присвоєння визначає дані, які містить змінна. Їх тип визначає і тип змінної. Наприклад, наступний оператор
var weekDay = "П'ятниця";
задає змінну weekDay, надає їй рядкове значення "П'ятниця", і цим визначає її тип як рядковий.
Якщо щодо змінної їй не присвоєно жодного значення, її тип не визначено. Її тип буде визначено лише після того, як їй буде надано деяке значення оператором присвоєння =.
| var weekDay | // Змінна визначена, але тип не відомий |
| weekDay = "П'ятниця"; | // Рядковий тип |
| weekDay=5; | // Цілий тип |
Вираз - це комбінація змінних, літералів і операторів, в результаті обчислення якої виходить одне єдине значення, яке може бути числовим (цілим або речовим), рядковим або булевим.
Змінні вирази повинні бути ініціалізовані або в операторі var, або оператором присвоєння. Якщо при обчисленні виразу зустрічається неініціалізована або взагалі не певна змінна, інтерпретатор генерує помилку "undefined variable" ("змінна не визначена"), вказуючи її місце на сторінці HTML.
Оператор привласнення розглядається як вираз привласнення, яке обчислюється рівним виразу правої частини, і в той же час він надає обчислене значення виразу змінної, заданої в лівій частині оператора.
- Арифметичне (обчислюваним значеннямє число)
- Рядкове (обчислюваним значенням є рядок)
- Логічне (обчислюване значення дорівнює true або false)
Для побудови виразів застосовуються оператори, які відповідають типу виразу.
Арифметичні вирази створюються арифметичними операторами (табл. 9.1).
Таблиця 9.1.Арифметичні оператори
Залишок від поділу цілих чисел
Збільшення значення змінної на одиницю
Зменшення значення змінної на одиницю
Нижче представлені арифметичні вирази в операторах присвоєння:
distance = speed * time;
distance = (speed ++) * time;
В останньому операторі швидкість (змінна speed) збільшується на одиницю та обчислюється пройдена відстань.
Оператори у виразі обчислюються зліва направо з урахуванням загальноприйнятого старшинства арифметичних операцій. Дужками можна змінити порядок виконання арифметичних операцій.
Крім простого оператора присвоєння (=) існують скорочені форми операторів присвоєння, поєднаних з арифметичними операторами, в яких виконуються арифметичні дії над лівим та правим операндами і результат присвоюється змінною, заданою лівим операндом. Усі вони перелічені у табл. 9.2.
Таблиця 9.2.Скорочені оператори присвоєння
| Оператор | Значення |
| х *= у | х = х * у |
| х /= у | х=х/у |
| х += у | х = х + у |
| х -= у | х = х - у |
| х%=у | х = х% у |
Для створення логічних виразів використовуються оператори порівняння та логічні оператори, які застосовуються до змінних будь-якого типу.
Оператори порівняння аналогічні в інших мовах програмування. Їхній список представлений у табл. 9.3.
Таблиця 9.3.Оператори порівняння
Більше або дорівнює
Менше або дорівнює
При використанні цих операторів у виразі воно обчислюється рівним true, якщо відповідне порівняння вірне, інакше значення виразу дорівнює false.
Логічні оператори представлені у табл. 9.4. У прикладах передбачається, що змінна var1 = 'Кіт', var 2 = 'Кіт', var3 = false.
Таблиця 9.4.Логічні оператори
| Оператор |
вираз 1 && вираж2
Повертає вираж!, якщо воно перетворюється або дорівнює false, інакше вираж2
varl && var2 (рівно 'Кіт')
var2 && var3 (рівно false)
Повертає вираж!, якщо воно перетворюється або одно true, інакше вираж2
varl var2 (рівно 'Кіт')
var3 I varl (рівно 'Кіт')
var3 false (рівно false)
Якщо вираз дорівнює true, повертає false; якщо вираз дорівнює false, повертає true
! varl (рівно false)
! var3 (рівно true)
Логічні оператори та оператори порівняння використовуються в операторах циклу та умови для перевірки завершення циклу або виконання певної групи операторів.
string = "Моє" + "рядок"; // Значення змінної string одно "Моястрока"
Оператор + може використовуватися зі змішаними типами операндів. Всі операнди наводяться до рядкового типу, якщо хоча б один із операндів містить рядковий літерал. Наприклад, вираз "Май" + 1.999еЗ буде обчислено рівним рядку "Май1999", а"Май" + t дорівнюватиме "Mautrue", якщо змінна t містить булеве значення true.
Умовний оператор є єдиним оператором, який використовує три операнди. Його значенням є один із двох операндів, який визначається з умови істинності третього. Синтаксис його такий:
(Умова) ? знач1: знач2;
Якщо операнд умова має значення true, то результатом обчислення умовного оператора буде знач!, інакше — знач2. Наприклад, оператор
надає змінній range значення "Передача", якщо змінна mark менше або дорівнює 2, інакше їй надається значення
Масив - впорядкований набір однорідних даних, до елементів якого можна звертатися на ім'я та індекс. Масив створюється оператором new і конструктором масиву - системною функцією Array, що ініціалізує елементи масиву. Створити масив можна однією з наступних конструкцій:
ім'я_масиву = new Array([елемент0, елемент1, . . ., елементи]);
ім'я_масиву = new Array([довжина_масиву]);
При використанні першого синтаксису конструктору масиву як параметри передаються значення елементів масиву, в другій конструкції задається довжина масиву. Можна використовувати конструктор без параметрів, але в цьому випадку тільки визначається, що змінна з цим ім'ям використовується як масив. Елементи масиву не задані, і тому до них не можна звернутися, поки в сценарії їм явно не будуть присвоєні значення.
Для отримання значення елемента масиву необхідно у квадратних дужках поруч із ім'ям масиву вказати порядковий номер елемента. Елемент масиву можна використовувати у виразах та в лівій частині оператора присвоєння:
а [0] = "1"; а [1] = 2; с = b[2]*с[3];
Масив, будучи об'єктом, має методи,які викликаються з використанням звичайної об'єктно-орієнтованих мов точкової нотації. У табл. 9.5 перераховано методи об'єкта Масив.
Таблиця 9.5.Методи об'єкту Масив