Вбудовані об'єкти

⇐ ПредыдущаяСтр 6 из 8Следующая ⇒

Об'єкт Date
У JavaScript можна використовувати деякі наперед задані об'єкти: Date, Array, Math тощо. Розглянемо об'єкт Date. Він дозволяє працювати і з датою, і з часом. Почнемо з прикладу подання на екрані поточного часу. Спочатку потрібно створити новий об'єкт Date за допомогою вказівки new:

today= new Date()

Таким чином створено новий об'єкт Date з назвою today. Якщо, як у поданому прикладі, при створенні цього об'єкту не було вказано дату й час, то будуть запозичені дата й час, поточні на момент виконання вказівки.
До об'єкту Date можна застосувати певні методи: getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() тощо. Їхній зміст очевидний навіть при поверхневому знанні англійської мови.
Для задання дати й часу маємо викликати вказівкою new метод Date() за таким форматом:

Date(рік, місяць, день, години, хвилини, секунди)<tt)< tt="">

Зауважте: нумерація місяців — з нуля для січня. Наприклад, для створення об'єкту Date, у якому задано 27 листопада 2011 року 17 годин 35 хвилин і 23 секунди, потрібно записати таке:</tt)<>

today= new Date(2011, 10, 27, 17, 35, 23)

Напишемо скрипт, який виводить поточні дату й час таким чином:

Час: 17:13
Дата: 26.2.2013

Код має такий вигляд:

<script language="JavaScript"></script>

Зауважте: метод getYear() повертає кількість років, які минули з 1900 року. Тому до його результату додаємо 1900. Збільшення на 1 результату getMonth() обумовлено вже згаданою нумерацією місяців — з нуля для січня.
Поданий скрипт може призвести до подання кількості хвилин однією цифрою. Наприклад, 12:3 зимість звичного 12:03.Розв'язання цього питання дивіться у наступному прикладі годинника.

Час:
Дата:

Код має такий вигляд:

<html><head><script Language="JavaScript"> </script></head><body onLoad="clock()"><form name="clock"> Час: <input type="text" name="time" size="8" value=""><br> Дата: <input type="text" name="date" size="8" value=""></form></body></html>

Тут для щосекундного корегування вихідних даних використано метод setTimeout() при щосекундному створенні нового об'єкту Date, куди заносимо поточні час і дату.
Фукцію clock() викликано одразу по завантаженні сторінки програмою опрацювання подій onLoad (див. тег <body>). HTML-сторінка містить два елементи форми для введення тексту. Функція clock() записує в обидва ці елементи у коректному форматі поточні час і и дату. Для цього використано рядкові змінні timeStr и dateStr. Проблему запису двома цифрами одноцифрового числа з нулем попереду вирішено таким чином:

timeStr+= ((minutes < 10)? ":0": ":") + minutes;

Це стислий запис звичнішого коду:

if (minutes < 10) timeStr+= ":0" + minutes else timeStr+= ":" + minutes;

Об'єкт Array
Починаючи з версії 1.1 мови JavaScript, можна використовувати об'єкт Array. Для створення нового масиву myArray потрібно записати:

myArray= new Array()

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

myArray[0]= 2011;myArray[1]= "ua";

Розмiр масиву встановлюється динамічно. Після запису myArray[2011]= "kiev" размір масиву буде встановлено на 2012 елементів. Розмір масиву може лише збільшуватися. Тому користуватися ним потрібно економно.
Запис:

перший рядокдругий рядоктретій рядок

можна отримати у результаті виконання такого коду:

Спочатку створено новий масив з назвою myArray. Потім першим трьом його елементам надано відповідних величин. Після цього у циклі тричі виконано вказівкуdocument.write(myArray[i] + "<br>");. За допомогою змінної i ведуть відлік циклів от 0 до 2. Таким чином тричі отримано виклик document.write(), що еквівалентно виконанню такого коду:

document.write(myArray[0] + "<br>");document.write(myArray[1] + "<br>");document.write(myArray[2] + "<br>");

Об'єкт Math
Для здійснення математичних розрахунківможна скористатися властивостями й методами об'єкту Math.
Сталі — властивості об'єкту Math — у коді Java Script позначають таким чином: Math. назва властивості.
Властивості об'єкту Math такі:
E — число Ейлера e — 2.718281828459045;
PI — число Піфагора π — 3.141592653589793;
LN2 — натуральний логарифм числа 2, тобто ln 2 — 0.6931471805599453;
LN10 — натуральний логарифм числа 10, тобто ln 10 — 2.302585092994046;
LOG2E — логарифм числа e за основою 2 — 1.4426950408889634;
LOG10E — логарифм числа e за основою 10 — 0.4342944819032518;
SQRT2 — арифметичний корінь квадратний з 2 — 1.4142135623730951;
SQRT1_2 — арифметичний корінь квадратний з 1/2 — 0.7071067811865476.
Функції — методи об'єкту Math — у коді Java Script позначають таким чином:
Math. назва методу ( назва змінної-аргумента ).
Методи об'єкту Math такі:
abs — абсолютна величина (модуль);
acos — арккосинус;
asin — арксинус;
atan — арктангенс;
ceil — найменше ціле число, що не менше за аргумент;
cos — косинус;
exp — експонента;
floor — найбільше ціле число, що не перевищує аргумент;
log — натуральний логарифм;
max — найбільша з двох величин;
min — найменша з двох величин;
pow — результат піднесення першого аргументу до степеня, що збігається з другим аргументом;
random — випадкове число з (0; 1);
round — округлення величини аргумента до найближчого цілого числа;
sin — синус;
sqrt — арифметичний корінь квадратний;
tan — тангенс.
Наприклад, виклик Math.random() призводить до породження випадкового числа з проміжку [0;1]. Один з можливих результатів виклику

<script language="JavaScript"><!-- hidedocument.write(Math.random())</script>

такий: 0.9154177331365645. При кожному новому завантаженні тут буде з'являтися нове число.

Об'єкт Number
В доповнення до властивостей об'єкту Math доступ до деяких властивостей проходить через об'єкт Number див. таку таблицю.

Властивість	Опис
`MAX_VALUE`	Найбільше доступне додатне число, приблизно 1.79E+308. Величина може змінитися залежно від системи
`MIN_VALUE`	Найменше доступне додатне число, приблизно 2.22E-308. Величина може змінитися залежно від системи
`NaN`	Спеціальна нечислова величина, від англійською not a number — не число
`POSITIVE_INFINITY`	Довільне додатне число, яке більше за `Number.MAX_VALUE`, конвертується у цю величину і подається як `+Inf`
`NEGATIVE_INFINITY`	Довільне від'ємне число, яке менше за `Number.MAX_VALUE`, конвертується у цю величину і подається як `-Inf`.

Number.NaN — особлива властивість — нечислова величина (англійською not a number). Наприклад, ділення на нуль чи спроба використати рядок як число повертає Number.NaN. При порівнянні ця властивість не дорівнює ні жодному числу, ні самій собі. Тому не варто використовувати порівняння з Number.NaN. Для цього використовують функцію isNaN().

Об'єкт String
Об'єкт String (текстовий рядок) має вбудовані методи, які застосовують при роботі з рядками. Одним з таких методів є substring, що повертає частину рядка. Він має два аргументи числового типу, що вказують на межі частини рядка. Щоб показати, як саме, покажемо, як працює такий код:

У результаті маємо:
1234
678
Ще одна властивість об'єкту String — властивість довжини length рядка, величина якого дорівнює кількості символів у рядку.

Шари

Що таке шар?
Шар — це одна из чудових можливостей, що вперше виникли у Netscape Navigator 4.0. З допомогою шарів точно позиціонують зображення, пересувають об'єкти по стрінці або роблять їх невидимими.
Пояснимо концепцію шару такою аналогією: беремо кілька аркушів паперу. На кожному з них пишемо текст, креслимо рисунки або малюємо (фарбами) малюнки. Кладемо аркуші на стіл, один на один, вирівнюючи краї. Так і шари накладають один на один, як аркуші паперу на столі. У кожному шарі можуть бути прозорі ділянки, аналогічні вирізаним ділянкам на аркуші паперу, через які видно шар, розташований нижче.

Створення шару
Розглянемо приклад створення шарів для запису тексту літерами з тінню.

Два шари

Буде використано тег <div> (англ. division — розділення) — тег-контейнер для виділення (логічного) блоку — у поєднанні з каскадними таблицями стилів (англ. Cascading Style Sheets або скорочено CSS) — спеціальною мовою, яку використовують для відображення сторінок, написаних мовами розмітки даних. Специфікації CSS були створені та розвиваються Консорціумом Всесвітньої мережі. CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних) та їх візуальної презентації.
Код поданого прикладу з двома шарами має такий вигляд:

<style type="text/css"> #layer1, #layer2 { position: relative;/* Відносне позиціонування */ } #layer1 { font-size: 50px; /* Размер шрифту */ color: lime; /* Салатовий колір тексту */ z-index: 2; } #layer2 { font-size: 50px; /* Розмір шрифту */ color: green;/* Зелений колір тіні */ z-index: 1; top: -55px;/* Зсув тексту вгору */ left: 2px; /* Зсув тексту праворуч */ }</style><div id="layer1">Два шари</div><div id="layer2">Два шари</div>

Назви властивостей і навіть назви їхніх величин (англійською мовою) дуже прозорі.
Властивість position може набувати таких величин: absolute, fixed або relative.
Щодо властивості z-index, то зауважимо таке. Множина значень вичерпується такими трьома випадками: ціле число, auto й inherit. Згідно із замовчуванням, властивість z-index набуває величини auto. У цьому випадку порядок елементів визначається згідно з їхнім розташуванням у коді HTML і приналежністю до предка, бо нащадки мають той самий номер, що і їхні предки. Величина inherit вказує на наслідування властивості від предка. Також z-index може бути цілим числом. Чим більше це число, тим вище розташовано елемент. У проглядачі FireFox до версії 2.0 включно від'ємна величина z-index розташовує елемент нижче тла веб-сторінки та її вмісту. Opera не підтримує величини z-index більші, ніж 65536 = 2¹⁶.
Розглянемо приклад трьох шарів різного кольору.

Код поданого прикладу має такий вигляд:

<html><body><style type="text/css">#block{margin:5px 0; position:relative; height:150px}#one{ color: green; visibility: show; padding: 10px; background: yellow; width: 100px; height: 50px; position: absolute; left: 0px; top: 20px; z-index: 1; }#two{ color: blue; visibility: show; padding: 0px; background: red; width: 200px; height: 50px; position: absolute; left: 50px; top: 30px; z-index: 4; }#three{color: brown; visibility: show; padding: 10px; background: lime; width: 100px; height: 100px; position: absolute; left: 100px; top: 30px; z-index: 2; }</style>Текст перед блоком трьох шарів<B><div id="block"><div id="one"> Перший блок<BR><BR><BR><BR><BR><BR><BR><BR> Перший блок</p><div id="two"> Другий блок Другий блок<BR><BR><BR> Другий блок</div></div><div id="three">Третій блок</div></div></B>Текст після блоку трьох шарів</body></html>

Зауважимо, що альтернативною до show величиною властивості visibility є hidden. У цьому випадку шар є невидимим.
Щоб пояснити, як отримане розташування шарів узгоджено із відомостями щодо z-index, зауважимо: шар two вкладено у шар one. Величина 4 впливає лише на розташування шару two серед шарів, вкладених в шар one.
Розглянемо приклади блоків по два шари. В одному блоці розташуємо малюнок під текстом, в іншому — навпаки.

⇐ Предыдущая 1 2 3 4 567 8 Следующая ⇒

Date: 2015-07-24; view: 400; Нарушение авторских прав; Помощь в написании работы --> СЮДА...

mydocx.ru - 2015-2024 year. (0.006 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию