Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Листинг 2.9. Файл chapter2/LinksList/LinksList. html




<HTML>

<HEAD>

<TITLE>Links and Anchors</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

function urlJump()

{

var szNewURL="";

szNewURL=

.document.links[Sel.ListOfLinks.selected Index];

window.location.href=szNewURL;

}

//-->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<Н1>Перегляд посилань</Н1>

<FORM NAME="Sel">

<SELECT NAME="ListOfLinks">

</SELECT>

<INPUT TYPE="button" VALUE="Jump!" onClick="urlJump();">

</FORM>

<Р>Відвідайте ці сервери:

<Р><А HREF="http://www.glasnet.ru/~frolov/index.html">Haшa домашня сторінка</А>

<BR><A HREF="http://www.auramedia.ru">Каталог програм Auramedia</A>

<BR><A HREF="http://www.microsoft.corn/Java/" TARGET="newwnd">Cтpaница серверу Microsoft про Java</A>

<Р>Пишіть нам за адресою: <А HREF="mailto:frolov@glas.арі.org">[email protected]</A>

<HR>

<Н1>Список посилань</Н1>

<Р>Цей список сформований динамічно сценарієм JavaScript</P>

<SCRIPT LANGUAGE="JavaScript">

<!--

elem=new Array();

for(i=0; i<document.links.length; i++)

{

elem[i]=new Option("Elem" + i, i, false, false);

Sel.ListOfLinks.options [i]=elem[i];

Sel.ListOfLinks.options[i].text=document.links[i];

document.write("<HR>");

var szText=document.links[i] + "<BR>";

document.write(szText.bold());

document.write("host: ".italics() + document.links[i].host + "<BR>");

document.write("hostname: ".italics() + document.links[i].hostname + "<BR>");

document.write("href: ".italics() + document.links[i].href + "<BR>");

document.write("pathname: ".italics() + document.links[i].pathname + "<BR>");

document.write("port: ".italics() + document.links[i].port + "<BR>");

document.write("protocol: ".italics() + document.links[i].protocol + "<BR>");

document.write("search: ".italics() + document.links[i].search + "<BR>");

document.write("target: ".italics() + documerit. links [i].target + "<BR>");

}

Sel.ListOfLinks.selectedIndex=0;

//-->

</SCRIPT>

</BODY>

</HTML>

 

У секції заголовка документа HTML визначена функція urlJump, що завантажує у вікно браузера об'єкт, що відповідає обраної в списку посиланню:

function urlJump()

{

var szNewURL="";

szNewURL =

document.links[Sel.ListOfLinks.selectedlndex];

window. location. href=szNewURL;

}

 

Список посилань, а також кнопка Jump, служащая для активізації обраного посилання, визначені в такий спосіб:

 

<FORM NAME="Sel">

<SELECT NAME="ListOfLinks">

</SELECT>

<INPUT TYPE="button" VALUE="Jump! " onClick="urlJump();">

</FORM>

 

Ім'я форми, необхідне сценарію JavaScript для доступу до списку і кнопки, визначено в параметрі NAME оператора <FORM> як Sel.

Список з ім'ям ListOfLinks створитися оператором <SELECT>. Спочатку в списку немає жодного елемента. Всі елементи будуть додані в список сценарієм JavaScript.

Кнопка Jump активізує функцію urlJump, для чого в її визначенні зазначений оброблювач події onClick.

Функція urUump адресується до обраного елемента списку в такий спосіб:

 

szNewURL = document. links[Sel. ListOfLinks. selectedIndex];

 

Тут узята форма Sel і зазначена ім'я списку ListOfLinks як ім'я одного з властивостей форми. Номер виділеного елемента списку знаходиться у властивості списку з ім'ям selectedIndex.

Сценарій заповнює масив посилань links і список Sel.ListOfLinks таким чином, що перший елемент масиву links відповідає першому посиланню в списку, другий елемент масиву - другому елементу і т.д. Тому вираження Sel.ListOfLinks.selectedIndex є номером посилання масиві links, що необхідно активізувати. Функція urlJump записує це посилання в перемінну szNewURL, а потім установлює значення властивості window, location, href.

У сценарії JavaScript, визначеному в тілі документа HTML, створюється масив elem:

 

elem=new Array();

 

Цей масив призначений для збереження елементів динамічно формованого списку, визначеного порожнім у формі Sel.

Далі в сценарії розташовується цикл по всім посиланнях, розміщеним у документі HTML:

 

for(i=0; i<document.links.length; i++) {

...

}

 

Кількість посилань знаходиться у властивості length об'єкта links, тому переменная циклу i змінює своє значення від 0 до document.links. length.

У циклі створюється новий елемент списку і записується в нього текст посилання:

 

elern[i] = new Option("Elem" + i, i, false, false);

Sel. ListOfLinks. options [ i] = elem[i];

Sel. ListOfLinks. options[i]. text = document. links[i];

 

Текстовий рядок, що відповідає посиланню, витягається з масиву links як document. links[i].

Після запису в документ HTML розділювальної лінії сценарій записує в нього текст посилання, виділяючи його масним шрифтом:

 

document.write("<HR>");

var szText=document. links [i] + "<BR>";

document. write(szText. bold());

 

Слідом за цим у документ HTML записуються усі властивості посилання, витягнуті з поточного елемента масиву links. Наприклад, ім'я вузла і номер порту витягаються і записуються в документ HTML у такий спосіб:

 

document. write ("host: ". italics() + document. links[i]. host + "<BR>");

 

Останнє, що робить сценарій уже після завершення циклу, - це виділення першого елемента в списку Sel. ListOfLinks:

 

Sel. ListOfLinks. selectedIndex=0;

 

Для цього номер що виділяється елемента (у даному випадку це 0) записується у властивість списку з ім'ям selectedIndex.

2.6. Умонтований клас Math

2.6.1. Властивості

Всі властивості класу є математичними константами, тому сценарій JavaScript не може змінювати їхнє значення.

Е

Ця властивість являє собою константу е. Приблизне значення цієї константи дорівнює 2,72. От приклад використання властивості Е:

 

var n;

n = Math. E;

 

Тут записується в перемінну n значення константи е.

РI

Властивість PI - це число п. Воно також є константою з приблизним значенням, рівним 3,14. Приклад використання властивості PI:

 

var n;

var n;

n = 2 * Math. PI * n;

 

Тут властивість PI використовується для обчислення довжини окружності по її радіусі. Обчислення виконується по такій формулі:

 

l = 2п

 

де R - радіус окружності.

LN2

Властивість LN2 - константа зі значенням натурального логарифма числа 2, тобто ln2. Приклад використання:

 

var nValue;

nValue = Math. LN2;

 

N10

Властивість LN10 - константа зі значенням натурального логарифма числа 10, тобто ln 10. Приклад використання:

 

var nValue;

nValue = Math. LN10;

 

LOG2E

Ця властивість є константою зі значенням, рівним логарифму числа 2 по підставі е, тобто loge2. Приклад використання:

 

var nValue;

nValue = Math. LOG2E;

 

LOG10E

Властивість LOG10E - це логарифм числа е по підставі 10, тобто log10e. Приклад використання:

 

var nValue;

nValue = Math. LOG10E;

 

SQRT2

Властивість SQRT2 - це значення квадратного кореня з двох. Приклад використання:

 

var nValue;

nValue = Math. SQRT2;

 

SQRT1_2

Властивість SQRT1_2 - це значення квадратного кореня з 0,5. Приклад використання:

 

var nValue;

nValue = Math. SQRTl_2;

 

2.6.2. Методи

Перерахуємо методи класу Math.

abs

Обчислення абсолютного значення. Приклад використання:

 

var nValueAbs;

nValueAbs = Math. abs(nValue);

 

Тут у перемінну nValueAbs записується абсолютне значення перемінної nValue.

acos

Обчислення арккосинуса. Приклад використання:

 

var nValue;

nValue = Math. acos(nAngle);

 

asin

Обчислення арксинуса. Приклад використання:

 

var nValue;

nValue = Math. asin(nAngle);

 

atan

Обчислення арктангенса. Приклад використання:

 

var nValue;

nValue = Math. atan(nAngle);

 

ceil

Обчислення найменшого цілого значення, більшого або рівного аргументу функції. Приклад використання:

 

var nValue;

nValue = Math. ceil(nArg);

 

cos

Обчислення косинуса. Приклад використання:

 

var nValue;

nValue = Math. cos(nAngle);

 

exp

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

 

var nValueExp;

nValueExp = Math. exp(nValue);

 

floor

Обчислення найбільшого цілого значення, меншого або рівного аргументу функції. Приклад використання:

 

vaг nValue;

nValue = Math. floor(nArg);

 

log

Обчислення натурального логарифма аргументу функції. Приклад використання:

 

var nValue;

nValue = Math. log(nArg);

 

max

Визначення найбільшого з двох значенні. Приклад використання:

 

var nValue1;

var nValue2;

var nValueMax;

nValueMax = Math. max(nVaiue1 nVaiue2);

 

min

Визначення найменшого з двох значень. Приклад використання:

 

var nVaiue1;

var nValue2;

var nValueMin;

nValueMin = Math. min(nVaiue1, nVaiue2);

 

pow

Зведення числа в заданий ступінь. Приклад використання:

 

var nValue;

nValue = Math. pow(2, 3);

 

Тут число 2 зводиться в ступінь 3, а результат, рівний восьми, записується в перемінну nValue.

random

Метод random повертає випадкове число в інтервалі від 0 до 1. Приклад використання:

 

var nRandomValue;

nRandomValue = Math. random();

 

round

Метод round призначений для виконання округлення значення аргументу до найближчого цілого. Якщо десяткова частина числа дорівнює 0,5 або більше цього значення, то виконується округлення у велику сторону, якщо менше - у меншу. Приклад використання:

 

var nValue;

nValue = Math. round(1.8);

 

Після виконання округлення значення nValue буде дорівнює двом.

sin

Обчислення синуса. Приклад використання:

 

var nValue;

nValue = Math. sin(nAngle);

 

sqrt

Обчислення квадратного кореня від аргументу. Приклад використання:

 

var nValueSqrt;

nValueSqrt = Math. sqrt(nArg);

 

tan

Обчислення тангенса. Приклад використання:

 

var nValue;

nValue = Math. tan(nAngle);

 

2.7. Умонтований клас Date

2.7.1. Конструктори класу Date

Для використання більшості методів класу Date необхідно створити об'єкт цього класу за допомогою одного з трьох конструкторів.

Конструктор першого виду визивається в такий спосіб:

 

var dtNewDate;

dtNewDate = new Date();

 

Тут створюється об'єкт Date, у якому зберігається інформація про поточну дату і час. Цей час задається за Гринвічем або, користуючи більш сучасним визначенням, із використанням часу Universal Coordinated Time.

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

 

var dtNewDate;

dtNewDate = new Date(nMilliseconds);

 

Параметр nMilliseconds задає дату в миллисекундах, рахуючи від 1 січня 1970 року.

Конструктор третього виду призначений для роздільної установки компонент дати й у багатьох випадках більш зручний для використання:

 

var dtNewDate;

dtNewDate = new Date (year, month, date, hours, min, sec, ms);

 

Параметри цього конструктора описані нижче:

Параметр Опис

year Рік, наприклад 1998 або 2012

month Номер місяця від 0 (січень) до 11 (грудень)

date Календарна дата, задається в діапазоні від 1 до 31

hours Необов'язковий параметр, що задає перша година дня в діапазоні від 0 до 23. Ви зобов'язані вказувати цей параметр тільки і тому випадку, якщо заданий параметр min

min Необов'язковий параметр, що задає хвилини в діапазоні від 0 до 59. Ви зобов'язані вказувати цей параметр тільки в тому випадку, якщо заданий параметр sec

sec Необов'язковий параметр, що задає секунди в діапазоні від 0 до 59. Ви зобов'язані вказувати цей параметр тільки в тому випадку, якщо заданий параметр ms

ms Необов'язковий параметр, що задає миллисекунды в діапазоні від 0 до 999

getDate

Визначення дати, що зберігається в об'єкті класу Date. Метод повертає значення календарної дати в діапазоні від 1 до 31. Приклад використання:

 

var dtNewDate;

var nDate;

dtNewDate = new Date();

nDate = dtNewDate. getDate();

 

getDay

Визначення номера дня тижня, що зберігається в об'єкті класу Date. Метод повертає 0 для неділі, 1 - для понеділка, і т.д. Приклад використання:

 

nDay = dtDate. getDay();

 

getHours

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

 

nHours = dtDate. getHours();

 

getMinutes

Визначення кількості промайнуть, минулих після початку часу. Приклад використання:

 

nMinutes = dtDate. getMinutes();

 

getMonth

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

 

nMonth = dtDate. getMonth();

 

getSeconds

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

 

nSeconds = dtDate. getSeconds();

 

getTime

Визначення часу для заданого об'єкта класу Date. Метод getTime повертає кількість миллисекунд, минулих із 1 січня 1970 року. Приклад використання:

 

nMilliseconds = dtDate. getTime();

 

getTimeZoneOffset

Визначення зсуву локального часу щодо часу за Гринвічем (у миллисекундах). Приклад використання:

 

nOffsetMilliseconds = dtDate. getTimeZoneOffset();

 

getYear

Метод getYear повертає рік, що зберігається в об'єкті класу Date. Приклад використання:

 

nYear = dtDate. getYear();

 

parse

Метод parse повертає кількість миллисекунд, минулих із 00 часів 00 хвилин 1 січня 1970 року по час, зазначений у параметрі функції. Для виклику цього методу вам не потрібно створювати об'єкт класу Date, а можна просто посилатися на ім'я цього класу:

 

nMS = Date. parse(szDataString);

 

Через параметр szDataString ви можете зазначити час, наприклад, так:

 

"12 Oct 1998 12:00:00"

"12 Oct 1998 12:00:00 GMT"

"12 Oct 1998 12:00:00 GMT+0330"

 

Перша з цих рядків задає локальну дату і час, друга - дату і час за Гринвічем, і, нарешті, остання - час і дату за Гринвічем сo зсувом на 3 час. і 30 хв.

Метод parse звичайно застосовують разом із конструктором об'єкта Date або з методом setTime, що ми роздивимося нижче.

setDate

Метод setDate використовується для установки календарної дати в об'єкті клacca Date. Приклад використання:

 

dtNewDate. setDate(nDateNumber);

 

Параметр nDateNumber може приймати значення від 1 до 31.

setHours

Метод setHours використовується для установки кількості часів, минулих після полуночи, в об'єкті класу Date. Приклад використання:

 

dtNewDate. setHours (nHours);

 

Параметр nHours може приймати будь-які позитивні або негативні значення. При необхідності відбувається відповідне і зміна календарної дати, записаної в об'єкті класу Date.

setMinutes

Метод setMinutes використовується для установки кількості промайнуть, минулих після початку часу, в об'єкті класу Date. Приклад використання:

 

dtNewDate. setMinutes(nMinutes);

 

Параметр nMinutes може приймати будь-які позитивні або негативні значення. При необхідності відбувається відповідна зміна календарної дати, записаної в об'єкті класу Date.

setMonth

Метод setMonth використовується для установки номера місяця, що пройшов із початку року, в об'єкті класу Date. Приклад використання:

 

dtNewDate. setMonth(nMonth);

 

Параметр nMonth може приймати будь-які позитивні або негативні значення. При необхідності відбувається відповідна зміна календарної дати, записаної в об'єкті класу Date.

setSeconds

Метод setSeconds використовується для установки кількості секунд, минулих із початку хвилини, в об'єкті класу Date. Приклад використання:

 

dtNewDate. setSeconds(nSeconds);

 

Параметр nSeconds може приймати будь-які позитивні або негативні значення. При необхідності відбувається відповідна зміна календарної дати, записаної в об'єкті класу Date.

setTime

За допомогою методу setTime можна встановити дату в об'єкті класу Date, що відповідає заданій кількості миллисекунд, минулих після 1 січня 1970 року. Приклад використання:

 

dtNewDate. setTime(nMilliseconds);

 

setYear

Метод setYear використовується для установки номера року, в об'єкті класу Date. Приклад використання:

 

dtNewDate. setYear(nsetYear);

 

toGMTString

Метод toGMTString призначений для перетворення дати в рядок, записаний у стандартному форматі часу за Гринвічем (GMT).

toLocaleString

Аналогічно попередньому, проте замість часу GMT використовується локальний час.

UTC

Метод UTC перетворює дату, задану параметрами методу, у кількість миллисекунд, минулих із 1 січня 1970 року.

При використанні методу UTC, так само як і методу parse, немає необхідності створювати об'єкт класу Date:

 

nMillisecond = Date. UTC(year, month, date, hours, min, sec, ms);

 

Параметри методу UTC задаються таким же уявою, як і описані вище параметри конструктора об'єкта класу Date третього виду.

2.8. Умонтовані функції

У цьому поділі перераховані декілька корисних умонтованих функцій, що можна використовувати в сценаріях JavaScript.

eval

Функція eval призначена для перетворення текстового рядка в чисельне значення. Через єдиний параметр вона одержує текстовий рядок і обчисляє її як вираження мови JavaScript. Функція повертає результат обчислення:

 

vаг nValue = Eval(szStr);

 

parseInt

Ця функція призначена для перетворення текстового рядка в целочисленное значення. Рядок передатися функції через параметр:

 

var nValue = parseInt(szStr);

 

parseFloat

Функція parseFloat намагається перетворити текстовий рядок у число з плаваючою точкою. Текстовий рядок передається цієї функції через перший параметр, а підстава числення - через другий:

 

var nFloat = parseFloat(szStr, nRadix);

 

escape

За допомогою функції escape сценарій JavaScript може закодировать текстовий рядок із застосуванням URL-кодировки. У цій кодировке спеціальні символи, такі, як "прогалина" або "табуляция", преобразовываются до такого виду: %ХХ, де XX - шестнадцатеричный код символу. Приклад використання цієї функції:

 

var szURL = escape(szStr);

 

unescape

Функція unescape, виконує дію, прямо протилежне дії функції unescape - перекодирует рядок із URL-кодировки в звичайний текстовий рядок:

 

var szStr = unescape(szURL);

 

2.9. Плавна зміна цвіту фона документа HTML

При перегляді сторінки деяких серверів Web, можна звернути увагу, що цвіт їхнього фона починає плавно змінюватися відразу після завантаження, становлячись поступово светлее або, навпаки, темнее. Аналогічний ефект може бути отриманий не тільки для цвіту фона, але і для цвіту тексту, а також гипертекстовых посилань. Можна зробити, наприклад, так, щоб рядки тексту поступово виявлялися на фоні сторінки або зникали (щоб відвідувач не встиг їх прочитати).

Складний на перший погляд ефект досягається надзвичайно просто: зміною властивості bgColor об'єкта document. У листинге 2.10 приведений приклад сценарію, що після завантаження документа HTML у вікно браузера змінює цвіт його фона з білого на чорний.

 




Поделиться с друзьями:


Дата добавления: 2014-11-29; Просмотров: 365; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.159 сек.