Роздрукувати сторінку
Главная \ Методичні вказівки \ Методичні вказівки \ 733 Методичні рекомендації до самостійних робіт з курсу Web-програмування, НУДПСУ, Національний університет державної податкової служби України

Методичні рекомендації до самостійних робіт з курсу Web-програмування, НУДПСУ

« Назад

733 Методичні рекомендації до самостійних робіт з курсу Web-програмування, НУДПСУ, Національний університет державної податкової служби України

САМОСТІЙНА РОБОТА

Самостійна робота полягає в тому, що необхідно доповнити конспект лекцій і самостійно опрацювати окремі питання. Також на самостійне опрацювання можуть бути винесені на виконання окремі лабораторні роботи з даного методичного комплексу. 

 

Питання до самостійного опрацювання

Подання інформації в мережі Інтернет

  1. Що таке вихідний текст.
  2. Створення тіла сторінки.
  3. Стандартна послідовність тегів для всіх текстів Web- сторінок.
  4. Теги, які використовуються для форматування тексту.

Література:  [1,3,18,19].

Теги, які використовуються в мові гіпертекстової розмітки HTML

  1. Редактори для полегшення роботи з HTML.
  2. Об’єктна модель документа (DOM).
  3. Коментарі та як вони виділяються за допомогою тегів.
  4. Плаваючі фрейми та застосування відповідного їм тега.
  5. Відправлення пошти з HTML – документа.
  6. Елемент керування «кнопка» та застосування відповідного йому тега.

Література: [1, 3, 8, 12, 14, 16, 18,19].

 

DHTML: Динамічний HTML

  1. Від чого залежить можливість динамічного HTML.
  2. Об’єктна модель документа та DHTML.
  3. Основні об’єкти DHTML та їх властивості.
  4. Програмні засоби, що використовуються в DHTML.

Література: [1, 3, 8, 12, 14, 16, 18].

Настройка програмного оточення для використання мови РНР

  1. Переваги та недоліки використання готового Web – оточення.
  2. Переваги та недоліки використання власного Web – оточення.
  3. Що аналізується при  вирішенні питання щодо встановлення Web – сервера.
  4. Рекомендації щодо вибору методу встановлення модуля РНР в системе Windows.
  5. Настройка Web-сервера Apache.

Література: [5, 6, 7, 9, 11, 18].

Настройка РНР для написання сценаріїв загального призначення

  1. Що треба зробити, щоб використовувати РНР для вирішення задач, не пов’язаних з Web.
  2. Версія РНР для командного рядка— РНР CLI.
  3. Використання РНР як для розробки Web-вузлів, так і для створення сценаріїв загального призначення.

Література: [5, 6, 7, 9, 11, 18].

Змінні в сценаріях РНР

  1. Ідентифікатори та якими вони повинні бути.
  2. Правила іменування змінних.
  3. Як створити значення змінної.
  4. Як відображаються значення змінних.

Література: [5, 6, 7, 9, 11, 18].

Використання констант в сценаріях РНР

  1. Чим відрізняються константи від змінних.
  2. Використання оператора «define».
  3. Ключові слова РНР.
  4. Правила використання вбудованих констант.

Література: [5, 6, 7, 9, 11, 18].

Робота з даними

  1. Які існують типи даних.
  2. Визначення типу змінної.
  3. Основні математичні операції мови РНР.
  4. Методи збільшення та зменшення змінної.

Література: [5, 6, 7, 9, 11, 18].

 

ТЕОРЕТИЧНИЙ МАТЕРІАЛ НА САМОСТІЙНЕ ОПРАЦЮВАННЯ

Загальний огляд мови JavaScript. 

JavaScript - це мова програмування, що використовується в складі  HTML-сторінок для збільшення їх функціональності та можливостей взаємодії з користувачем. JavaScript є однією із складових динамічного HTML. Ця мова програмування була створена фірмами Netscape  та Sun Microsystems на базі мови програмування Sun's Java. На сьогодні є декілька версій JavaScript. Однією із найбільш поширених є версія JavaScript 1.3. За допомогою JavaScript на HTML-сторінці можливо зробити те, що не можливо зробити за допомогою стандартних тегів HTML. 

Код програми JavaScript, розміщується або в середині HTML-сторінки, або в текстовому файлі, що пов’язаний за допомогою спеціальних команд з HTML-сторінкою. Цей код, як правило розміщується в середині тегу HTML та завантажується в браузер разом з кодом HTML-сторінки. Програма JavaScript не може існувати самостійно, тобто без  HTML-сторінки.

Виконання програми JavaScript відбувається при перегляді HTML-сторінки в браузері, звісно тільки в тому випадку, коли браузер містить інтерпретатор JavaScript. Практично всі сучасні популярні браузери оснащені таким інтерпретатором. Відзначимо, що крім JavaScript на HTML-сторінках можливо використовувати інші мови програмування. Наприклад, VBScript, або JScript, яка є варіантом JavaScript від фірми Microsoft. Але виконання програм VBScript та JScript гарантовано коректне тільки при перегляді HTML-сторінки за допомогою браузеру Microsoft Internet Explorer. Тому в більшості випадків використання JavaScript доцільніше, хоча функціональність програм VBScript та  JScript  дещо краща.

Досить часто програму JavaScript називають скриптом або сценарієм. Скрипти виконуються в результаті того, що відбулась деяка подія, пов’язана з HTML-сторінкою. В багатьох випадках виконання вказаних подій ініціюється діями користувача.

Скрипт може бути пов’язаний з HTML-сторінкою двома способами:

- За допомогою парного тегу SCRIPT;

- Як оброблювач події, що стосується конкретного тегу HTML.

Сценарій, вбудований в HTML-сторінку з використанням тегу SCRIPT має наступний формат:

<SCRIPT>
   // Код програми 
</SCRIPT>

Все, що розміщується між тегами <SCRIPT>  та </SCRIPT>, інтерпретується як код програми на мові JavaScript. Обсяг вказаного коду не обмежений. Інколи скрипти розміщують в середині HTML-коментарію. Це роблять для того, щоб код JavaScript не розглядався старими браузерами, які не мають інтерпретатора JavaScript. В цьому випадку сценарій має формат:

<SCRIPT>
   <!--
   // Код програми 
   -->
</SCRIPT>

Тег SCRIPT має декілька необов’язкових параметрів. Найчастіше використовуються параметри language  та src. Параметр language  дозволяє визначити мову та версію мови сценарію. Параметр src дозволяє задати файл з кодом сценарію.

Для пояснення використання параметрів тегу SCRIPT розглянемо задачу. Необхідно для HTML-сторінки hi.htm створити сценарій на мові JavaScript 1.3 для показу на екрані вікна повідомлення з текстом "Привіт!".  Відзначимо, що для показу на екрані вікна повідомлення можливо використати функцію alert. Для ілюстрації використання обох параметрів language  та src вирішення задачі реалізуємо двома варіантами.

Варіант 1. Визначення сценарію безпосередньо на  HTML-сторінці hi.htm

<html><head>

         <title>Використання JavaScript</title>

</head>

<body>

<script language="JavaScript1.3">

   alert('hi');

</script>

</body></html>

Варіант 2. Визначення сценарію в файлі a.js, пов’язаному з  HTML-сторінкою hi.htm за допомогою параметру src тегу SCRIPT. Код HTML-сторінкою hi.htm:

<html><head>

         <title>Використання JavaScript</title>

         <script language="JavaScript1.3" src="a.js"> </script>

</head><body>

</body></html>

Програмний код, записаний в файлі a.js:

alert('hi');

Результат виконання обох варіантів вирішення задачі однаковий і показаний на  рис.

Змінні та вирази JavaScript можливо використовувати в якості значень параметрів тегів HTML. В цьому випадку елементи JavaScript розміщуються між амперсандом (&) та крапкою з комою (;), але повинні бути обмежені фігурними дужками {} і використовуватись тільки в якості значень параметрів тегів.

Наприклад, нехай визначена змінна с і їй присвоєно значення green. Наступний тег буде виводити текст зеленого кольору :

<font color="&{c};"> текст зеленого кольору </font>

Відзначимо, що мінімальним комплектом програмного забезпеченням для розробки та тестування програм JavaScript є текстовий редактор та браузер з підтримкою JavaScript.

 

Синтаксис. Визначення та ініціалізація змінних

Сценарій JavaScript являє собою набір операторів, що послідовно інтерпретуються браузером. Оператори можливо розміщувати як в одному, так і в окремих рядках. Якщо оператори розміщені в одному рядку, то між ними необхідно поставити ;. В протилежному випадку ; не обов’язкова. Будь-який оператор можливо розмістити в декількох рядках без символу продовження.

Будь-яка послідовність символів, розміщених в одному рядку, якій передує //, розглядається як коментар. Для визначення багаторядкових коментарів використовується конструкція:

/*

Багаторядковий коментар

*/

В мові JavaScript рядкові та приписні букви вважаються різними символами. JavaScript використовує змінні для зберігання даних визначеного типу. При цьому  JavaScript є мовою з вільним використанням типів. Тобто не обов’язково задавати тип змінної, який залежить від типу даних, що в ній зберігаються. При зміні типу даних автоматично змінюється і тип змінної.

JavaScript підтримує чотири простих типи даних. Ілюстрацією цього є табл. 1. Для присвоєння змінним значень основних типів використовуються – літерали.

Таблиця 1

Типи даних JavaScript

Тип даних

Пояснення

Приклад літерала

Цілий

Послідовність цілих чисел

789     +456      -123

З плаваючою крапкою

Числа з крапкою, яка відділяє цілу частину від дробової, або числа в науковій нотації

7.25      0.525е01

71.2Е-4

Рядковий

Послідовність алфавітно-цифрових символів, взятих в одинарні (’), або подвійні (") лапки.

"Привіт"

"234"

"Hello World!!!"

Булевий або логічний

Використовуються для оброблення ситуацій так/ні в операторах порівняння

true

false

Ім’я змінної повинно містити тільки букви латинського алфавіту, символ _, арабські цифри та починатись з букви, або символу підкреслення _.  Довжина імені повинна бути менша від 255 символів. Заборонено використовувати імена, що збігаються з ключовими словами JavaScript. Приклади імен: _hello, go, go123.

Визначити змінну можливо:

- Оператором var, наприклад - var a;

- При ініціалізації, за допомогою оператору присвоєння (=), наприклад   b=126.

Визначення та ініціалізацію змінних можливо реалізувати в будь-якому місці програми.

Вирази та оператори

Вираз - це комбінація змінних, літералів та операторів, в результаті обчислення яких можливо отримати тільки одне значення, яке може бути числовим, рядковим або булевим.

Для реалізації обчислень в JavaScript використовуються арифметичні, рядкові, логічні вирази та декілька типів операторів. 

Арифметичні вирази - обчислюють число, наприклад а=7+5;

Рядкові вирази - обчислюють рядок символів, наприклад "Джон" або  "234";

Логічні вирази - обчислюють true (істина) або false (хибна).

Оператор присвоювання (=) - присвоює, значення лівому операнду, базуючись на значенні правого операнда. Наприклад для присвоєння змінній а значення числа 5 необхідно записати:

а=5

До стандартних арифметичних операторів відносяться - оператори додавання (+), віднімання (-), множення (*), ділення (/), остача від ділення чисел (%), збільшення числової змінної  на 1 (++), зменшення числової змінної на 1 (--).

Відзначимо, що оператор додавання можна використовувати не тільки для чисел, але й для додавання (контрактації / конкатенації) текстових рядків.

Для створення логічних виразів використовуються логічні оператори та оператори порівняння.

До логічних операторів відносяться - логічне І (&&), логічне  АБО (||), логічне НІ (!).

Оператори порівняння не відрізняються від таких операторів в інших мовах програмування. До операторів порівняння відносяться  (==, >, >, =<, <=,!=).

Оператори вибору

Оператори вибору відносяться до операторів управління призначенням яких є зміна напрямку виконання програми. Крім операторів вибору до операторів управління відносяться: оператори циклу та оператори маніпулювання  з об’єктами.

Оператори вибору призначені для виконання деяких блоків операторів в залежності від істинності деякого логічного виразу.  До операторів вибору відносяться - оператор умови if...else та перемикач switch.

Синтаксис оператора умови такий:

if (умова) {

         група операторів 1

         . . . . . . . . .

}

[else] {

         група операторів 2

         . . . . . . . . .

}

Перша група операторів виконується при умові істинності виразу умова. Необов’язковий блок else визначає другу групу операторів, яка буде виконуватись в випадку хибності умови, заданої в блоці if. В середині групи операторів, що виконується можуть бути використані будь-які інші оператори, в тому числі і інші оператори умови. Це дозволяє створювати групу вкладених операторів умови if та реалізовувати складні алгоритми перевірки. Однак, якщо кількість вкладених операторів if більша ніж три, то програма стає складною для розуміння. В такому випадку доцільно використовувати оператор switch. В цьому операторі обчислюється деякий вираз та порівнюється з значенням, заданим в блоках case. Синтаксис оператора switch  такий:

switch  (вираз) {

case значення1:

[оператори1]

break;

case значення2:

[оператори2]

break;

...

default:

[оператори]

}

Якщо значення виразу в блоці switch дорівнює значення1, то виконується група операторів оператори1, якщо дорівнює значення2, то виконується група операторів оператори2 і так далі. Якщо значення виразу не дорівнює ні одному із значень, що  задані в блоках case, то обчислюється група операторів блоку default, якщо це блок заданий, інакше виконується вихід із оператору switch.  Необов’язковий оператор   break, який можливо задавати в кожному із блоків case, виконує безумовний вихід із оператору switch. Якщо він не заданий, то продовжується виконання операторів в наступних блоках case до першого оператору break або до кінця оператору    switch. 

 

Оператори циклу

Цикл - це деяка група команд, що повторюється, доки вказана умова не буде виконана. JavaScript 1.3 підтримує дві форми циклу: for та while. Крім того, оператори break та continue, використовуються разом з циклами.

Цикл for повторює групу команд, до тих пір, доки вказана умова хибна. Синтаксис оператору for такий:

for ([initial-expression];     [condition];     [increment-expression])
{
   statements
}

Виконання циклу for проходить в такій послідовності:

1. Вираз initial-expression служить для ініціалізації змінної лічильника. Цей вираз розраховується один раз на початку виконання циклу

2. Вираз condition розраховується на кожній ітерації циклу. Якщо значення виразу condition дорівнює true, виконується група операторів statements в тілі циклу. Якщо значення виразу condition дорівнює false, то цикл forзакінчується. Якщо вираз condition пропущено, то він вважається рівним true. В цьому випадку цикл продовжується до оператора break.

3. Вираз increment-expression використовується для зміни значення змінної лічильника.

4. Розраховується група операторів statements та реалізується перехід на наступну ітерацію циклу, тобто на крок 2.

Приклад. Цикл для розрахунку суми цілих чисел від 1 до 100.

s=0
for (i=1;i<101;i++) {
   s=s+1;
}

Оператор while повторює цикл, доки вказана умова істина. Оператор while виглядає таким чином:

 while (condition) {
   statements
 }

Цикл виконується while таким чином. Спочатку перевіряється умова condition. Якщо умова істина, то виконується група операторів statements в середині циклу. Перевірка істинності виконується на кожному кроці циклу.  Якщо умова хибна то цикл закінчує своє виконання.

Інколи необхідно закінчити цикл не по умові, що задана в його заголовку, а в результаті виконання деякої умови в тілі циклу. Для цього використовуються оператори break  та continue.  Оператор break завершує цикл while або for та передає керування програмою першому оператору після циклу. Оператор continue передає  управління оператору перевірки істинності умови в циклі while та оператору оновлення значення лічильника в циклі for, і продовжує виконання циклу.

Контрольні запитання

  1. Навіщо використовується мова JavaScript?

  2. Як визначити в HTML – документі код JavaScript?

  3. Синтаксис запису змінних в JavaScript?

  4. Синтаксис запису виразів в JavaScript?

  5. Типи даних JavaScript?

  6. Оператори JavaScript?

  7. Оператори вибору JavaScript?

  8. Оператори циклів JavaScript?

  9. Як достроково закінчити цикл?

  10. Як достроково перейти на наступну ітерацію циклу?

Використання функцій

Функція - JavaScript це іменована група команд, які вирішують певну задачу та можуть повернути деяке значення. Функція визначається за допомогою оператору function , що має такий синтаксис:

function Ім’я_функції ([параметри])

{

[оператори]

return [значення_що повертається]

}

Параметри, що передаються функції, розділяються комами. Необов’язковий оператор return в тілі функції (блок операторів, що обмежений фігурними дужками), визначає значення, що повертається функцією. Визначення функції тільки задає її ім’я и визначає, що буде робити функція при її визові. Безпосереднє виконання функції реалізується, коли в сценарії відбувається її виклик та передаються необхідні параметри. Відзначимо, що визначення функції необхідно реалізувати на HTML-сторінці до її виклику. Наприклад, для показу на екрані вікна повідомлення з текстом "Це виклик функції" визначимо функцію Go та реалізуємо її виклик:

<html><head><title>Використання JavaScript</title>

         <script>

         function Go() {

         alert("Це виклик функції")

         }

         </script>

</head><body>

<script>

Go();

</script></body></html>

Об’єктна модель JavaScript

JavaScript відноситься до об’єктно - орієнтованих мов програмування. Об’єкт – це цілісна конструкція, що має властивості, які є змінними JavaScript та методи їх обробки. Властивості можуть бути іншими об’єктами. Функції, пов’язанні з об’єктом називаються методами об’єкта. Для звернення до властивостей об’єкту використовується наступний синтаксис:

objectName.propertyName
Ім’я об’єкту, імена властивостей та методів чуттєві до регістру. 
Для визначення властивостей їм  необхідно присвоїти значення. 
Наприклад, якщо існує об’єкт з іменем myCar, то для визначення 
властивості model необхідно:
            myCar.model = "Таврія"
Для визначення методів необхідно спочатку визначити 
звичайну функцій, а після цього, необхідно зв’язати цю функцію 
з існуючим об’єктом:
object.methodname = function_name 
де  object - існуючий об’єкт, methodname – ім’я, що призначається 
методу, function_name - ім’я функції.
Виклик методу в контексті об’єкту реалізується так:
object.methodname (params);

Для створення екземпляру об’єкта необхідно:

- Написати функції, які будуть використані в якості методів об’єкту.

- За допомогою звичайної функції визначити об’єкт.

- За допомогою оператора new створити екземпляр об’єкту.

Наприклад необхідно створити об’єкт з іменем car та властивостями model та color та методом go. Для цього необхідно написати функцію when, яка буде використана для визначення методу go:

function when() {

//код функції

}

Після цього необхідно написати функцію для визначення об’єкта:

function car( model, color) {
   this.model = model;
   this.color = color;
   this.go =when;
}

Відзначимо, що оператор this використовується для того, щоб присвоїти значення властивостям об’єкту, базуючись на параметрах, що передаються функції.

Створення об’єкту з іменем mycar можливо реалізувати так:

mycar = new car("Таврія", "Зелений")

В JavaScript всі елементи (теги) на HTML-сторінці вистроєні в ієрархічну структуру. Причому кожен елемент представлений в вигляді об’єкту, з визначеними властивостями та методами. Керування об’єктами на HTML-сторінці можливо багато в чому за рахунок того, що JavaScript дозволяє одержати доступ до цих властивостей та методів.  При реалізації доступу необхідно враховувати ієрархію об’єктів на HTML-сторінці. Відзначимо, що загальним об’єктом контейнером є об’єкт window, який відповідає вікну браузера. В свою чергу цей об’єкт містить деякі елементи оформлення, наприклад рядок стану. Завантаженій в вікно браузера HTML-сторінці відповідає об’єкт document. Всі без виключення елементи HTML-сторінки є властивостями об’єкту document. Прикладами об’єктів HTML є таблиця, гіперпосилання або форма. Для доступу до методів/властивостей елементів на HTML-сторінці використовується наступний синтаксис:

document.ім’я_об’єкту.ім’я_методу()

 

Обробка подій

Важливою ознакою інтерактивних HTML-сторінок є можливість реакції на дії користувача. Наприклад, натиск на кнопці повинен викликати появу діалогового вікна, або виконання перевірки правильності введених користувачем даних. В JavaScript інтерактивність реалізована за допомогою перехвату та обробки подій, викликаних в результаті дій користувача. Для цього в теги деяких елементів введені параметри обробки подій. Ім’я параметру обробки події починається з префіксу on, за яким йде назва події. Наприклад, події клік кнопкою миші Click, відповідає параметр обробки події з назвою onClick. Назви та характеристики деяких подій наведені в табл. 7.1.

Таблиця 7.1

Події JavaScript

Подія

Характеристика події

Обробник події

Click

Клік кнопкою миші на елементі форми або гіперпосилання

onClick

KeyDown

Натиск на клавіші клавіатури

onKeyDown

Load

Завантажується документ в браузер

onLoad

MouseDown

Натиск на кнопці миші

onMouseDown

MouseOver

Курсор знаходиться над елементом

onMouseOver

MouseOut

Курсор покидає зону над елементом

onMouseOut

Задача. Необхідно, щоб при наведені курсору на комірку таблиці із написом "Привіт" з’являлось вікно повідомлення з фразою "Hello". Можливі рішення:

Варіант 1:

<td onClick="alert('Hello')"> Привіт </td>

Варіант 2:

<script>

function Go() {

alert("Hello")

}

</script>

<td onClick="Go()"> Привіт </td>

В варіанті вирішення 1, код JavaScript був записаний безпосередньо в тезі, а в варіанті 2 наслідком кліку став виклик функції. Варіант 2 слід використовувати, якщо код обробки події великий за обсягом.

 

Стандартні об’єкти і функції JavaScript

В ядрі JavaScript визначені об’єкти та функції, які можливо використовувати не використовуючи контекст завантаженої сторінки. До основних об’єктів відносяться: Array, Date, Math, String.

Array-масив. Масив це упоряджений набір однотипних даних, до елементів якого можливо звернутись по імені або по індексу. Для створення масиву необхідно використати одну із двох конструкцій:

ім’я_масиву = new Array([елемент1], [елемент2], [елемент3],...)

ім’я_масиву = new Array([довжина масиву])

Відзначимо, що перший елемент масиву має номер 0.

В першій конструкції в якості параметрів використовуються елементи масиву, в другій конструкції використовується довжина масиву.

Наприклад:

ar1 = new Array(1, 2, 3)

ar2 = new Array(3)

Для доступу до значень елементів масиву в квадратних дужках біля імені масиву необхідно вказати порядковий номер елементу. Наприклад:

a = ar1[2]

ar1[0] = 7

В цьому прикладі, змінній а присвоюється значення елементу масиву за номером 2, а в елемент масиву за номером 0 записується значення 7.

Особливістю масивів JavaScript є те, що розмір масиву може встановлюватись динамічно. Наприклад, якщо для масиву із попереднього прикладу написати:

ar1[100] = 7,

то розмір масиву буде автоматично установлений рівним 101.

Для визначення довжини масиву можна скористатись властивістю length. Наприклад:

a = ar1. length

Зручність використання масивів забезпечується рядом методів, представлених в табл. 2

Таблиця 2

Методи об’єкту Array

Метод

Призначення

concat

Об’єднує два масиви в один.

join

Об’єднує всі елементи масиву в один рядок.

pop

Знищує останній елемент із масиву і повертає його значення.

push

Додає один або декілька елементів в кінець масиву  і повертає останній добавлений елемент.

reverse

Переставляє елементи масиву в зворотному порядку: перший елемент стає останнім, а останній першим.

shift

Знищує перший елемент масиву і повертає його значення.

slice

Створює перетин масиву в вигляді нового масиву

splice

Додає та/або знищує елементи масиву

sort

Сортує елементи масиву

unsift

Додає один або більше елементів в початок масиву та повертає нову довжину масиву

Об’єкт Date використовується для роботи з датами. Синтаксис оператора створення екземпляра об’єкту дати:

ім’я_об’єкту_дати = new Date([параметри])

Якщо параметри відсутні, то значенням об’єкту буде поточна дата. Параметром може бути рядок типу: "місяць день, рік часи:хвилини;секунди".

Наприклад, для створення дати  - "5 лютого 2005 року 23:12:07" необхідно:

day = new Date("February 5, 2005 23:12:07")

Прочитати або змінити параметри створеного об’єкту Date можливо за допомогою ряду методів.

Найбільш вживані методи показані в табл. 3

Таблиця 3

Методи  об’єкту Date

Метод

Призначення

getDate

Повертає число місяця для вказаної дати

getDay

Повертає день тижня для вказаної дати

getHours

Повертає годину для вказаної дати

getMinutes

Повертає хвилини для вказаної дати

getMonth

Повертає місяць для вказаної дати

getSeconds

Повертає секунди для поточного часу

getYear

Повертає рік для вказаної дати

setDate

Встановлює число місяця для вказаної дати

setDay

Встановлює день тижня для вказаної дати

setHours

Встановлює годину для вказаної дати

setMinutes

Встановлює хвилини для вказаної дати

setMonth

Встановлює місяць для вказаної дати

setSeconds

Встановлює секунди для вказаної дати

setYear

Встановлює рік для вказаної дати

Об’єкт Math дозволяє використовувати вбудовані в JavaScript математичні функції та константи.  При зверненні до методів та властивостей цього об’єкту створювати його не потрібно, але необхідно явно вказувати його ім’я.

Наприклад для того, щоб записати  в змінну а результат розрахунку функції sin від 1 радіану необхідно:

a = Math.sin(1)

Для того, щоб записати  в змінну а результат виразу 5 в степені 6 необхідно:

a = Math. pow(5,6)

Методи об’єкту  Math, що використовуються найбільш часто представлені в табл. 4.

Таблиця 4

Методи  об’єкту Math

Метод

Призначення

abs

Повертає абсолютне значення змінної.

sin, cos, tan

Повертають значення тригонометричних функцій. Аргументи задаються в радіанах.

acos, asin, atan

Повертають значення обернених тригонометричних функцій

exp, log

Повертають значення експоненціальної функції та функції натурального логарифму

ceil

Повертає найменше ціле число, більше або рівне значенню аргументу

floor

Повертає найменше ціле число, менше або рівне значенню аргументу

min, max

Повертає найбільше/ найменше значення з двох аргументів

pow

Повертає значення функції: pow(x,y)=xy

round

Повертає  значення аргументу, округлене до найближчого цілого числа

sqrt

Повертає квадратний корінь аргументу

Об’єкт String використовується для роботи з рядковими типами даних. Створення об’єкту String  відбувається коли змінній присвоюється рядковий літерал:

а = "Не явний спосіб створення рядкового об’єкту"

Крім того, можливо явно створити рядковий об’єкт, використовуючи оператор new та конструктор String:

ім’я_об’єкту = new String(Рядок)

Параметром конструктору може бути будь-який рядок. Наприклад:

a=new String("Явний спосіб створення рядкового об’єкту")

Єдиною властивістю об’єкту String є length, що зберігає довжину рядка. Наприклад для запису в змінну h довжини рядка а необхідно:

h=a.length

Методи об’єкту String, що використовуються найбільш часто перераховані в табл. Наведемо приклад використання методу toLowerCase для переводу рядкової змінної а в верхній регістр:

a=a.toLowerCase();

Таблиця  5

Методи  об’єкту String

Метод

Призначення

anchor

Створює HTML якір, який використовується, як гіпертекстове посилання.

link

Створює гіпертекстове посилання, по якій можливо перейти на інший URL.

fontsize

Виводить рядок, з встановленим розміром шрифта

bold

Виводить рядок, що відображається напівжирним шрифтом

italics

Виводить рядок, що відображається курсивом

strike

Виводить рядок, що відображається перекресленим шрифтом

substring

Повертає частину рядка об’єкта string

sub

Виводить рядок, що відображається як нижній індекс

sup

Виводить рядок, що відображається як верхній індекс

toLowerCase,

toUperCase

Переводить зміст рядка в нижній/верхній регістр

На додаток до стандартних об’єктів JavaScript існує декілька функцій, для виклику яких не потрібно створювати об’єктів. Ці функції дістали назву "функцій верхнього рівня". До цих функцій відносяться: parseFloat(параметр) та parseInt(параметр). Їх призначенням є аналіз рядкового аргументу та повернення відповідно число з плаваючою крапкою або цілого числа. Також досить часто використовуються функції Number(об’єкт) та String(об’єкт), які перетворюють об’єкт, що використовується в якості параметру в число або рядок.

Використання об’єктів window, document, location.

Об’єкт window створюється автоматично при запуску браузера. Крім того нове вікно можливо створити і засобами JavaScript. Для цього необхідно використати метод open. Синтаксис методу такий:

Ім’я_змінної = window.open([Ім’я_ файлу],[Ім’я_вікна],[Параметри])

Ім’я_змінної - це ім’я для звернення до нового вікна в програмі JavaScript.

Ім’я_ файлу – це повна або відносна URL-адреса документу, що буде відкриватись в вікні браузеру.

Ім’я_вікна – це ім’я, що буде вказане в якості цілі в гіпертекстовому посиланні на це вікно із іншого HTML-документу.

Параметри – задають значення параметрів вікна. Основні параметри представлені в табл. Якщо можливе значення властивості yes  або no, то при стандартних настройках використовується значення yes. 

Таблиця 6

Основні параметри вікна

Назва

Призначення

Можливі значення

directories

Наявність/відсутність панелі "Ссилки"

yes/no

height

Висота вікна

кількість пікселів

location

Наявність/відсутність адресного рядка

yes/no

menubar

Наявність/відсутність рядка меню

yes/no

resizable

Можливість/не можливість зміни розмірів віна користувачем

yes/no

scrollbars

Наявність/відсутність смуг прокрутки віна

yes/no

status

Наявність/відсутність рядка стану браузера

yes/no

toolbar

Наявність/відсутність панелей інструментів

yes/no

width

Ширина вікна

кількість пікселів

Наприклад, для створення нового вікна браузера в якому буде завантажено файл  a.html необхідно:

<script>

myw=window.open("a.html","displayWindow", "width=400,height=300,status=no,toolbar=no,menubar=no")

</script>

При цьому, ширина вікна дорівнює 400 пікселів, висота вікна 300 пікселів, рядок стану вікна, панель інструментів та рядок меню будуть відсутні. Відзначимо, що наведений код необхідно записати в одному рядку.

Для закриття вікна браузера використовується метод close. Наприклад для закриття вікна попереднього прикладу необхідно:

myw.close()

Відзначимо, що при звернення до методів та властивостей вікна браузера в якому знаходиться програма JavaScript імені вікна або ключового слова window можна не вказувати. Наприклад, закрити поточне вікна браузера можливо так:

close()

Цікавим методом об’єкту  window є метод setTimeout, за допомогою якого можливо запрограмувати виконання деяких команд після закінчення встановленого терміну часу. Синтаксис методу такий: setTimeout("Код_JavaScript",інтервал_часу)

В якості першого параметру функції setTimeout, як правило використовують функцію. Відзначимо, що цю функцію необхідно визначити на HTML-сторінці до використання функції setTimeout. Другим параметром функції setTimeout є інтервал часу закінчення якого буде сигналом про початок виконання  команд JavaScript. Цей параметр задається в мілісекундах. Наприклад, виконання функції myfunction через 3000 мілісекунд після завантаження HTML-сторінки можливо запрограмувати так:

setTimeout("myfunction()",3000)

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

Об’єкт document містить інформацію про завантажену сторінку. Всі елементи HTML-сторінки є властивостями цього об’єкту. Найбільш використовуваним методом об’єкту document є метод write, за допомогою якого можливо зробити запис в HTML-сторінку. Наприклад, для запису рядка "Привіт JavaScript" в документ в якому знаходиться сценарій необхідно:

document.write("Привіт JavaScript")

Ще одним широко вживаним методом цього об’єкту є getElementById, що реалізує доступу до будь-якого об’єкту з визначеним id. Синтаксис методу такий:

document.getElementById(ім’я_id)

Наприклад, встановлення значення стилю display елемента з id=myid рівним block, можливо реалізувати так:

document.getElementById("myid").style.display="block"

Властивості об’єкту location дозволяють одержати інформацію про URL-адресу завантаженої HTML-сторінки. Метод reload дозволяє пере завантажити в браузер поточну HTML-сторінку. Метод replace завантажує в вікно браузера сторінку, адреса якої використана в якості параметру цього методу.

Контрольні запитання

  1. Правила запису функцій?

  2. Що таке об’єкт в мові JavaScript?

  3. Як визначити об’єкт користувача в JavaScript?

  4. Стандартні об’єкти JavaScript?

  5. Як реалізована інтерактивність в JavaScript?

  6. Стандартні функції JavaScript?

  7. Методи та властивості об’єкту Array?

  8. Методи та властивості об’єкту Date?

  9. Методи та властивості об’єкту Math?

  10. Методи та властивості об’єкту String?

  11. Методи та властивості об’єкту window?

  12. Як за допомогою JavaScript відкрити нове вікно браузеру ?

  13. Як за допомогою JavaScript запрограмувати виконання деяких команд після закінчення встановленого терміну часу?

  14. Методи та властивості об’єкту document?

  15. Методи та властивості об’єкту location?

З повагою ІЦ “KURSOVIKS”!