2.3.10. Прийоми програмування на JavaScript

Найпрост ше почати вивчення програмування на як й-небудь мов зпростихприклад в, що читач може негайно перев рити. З подач автор в мови Зус сучасн книги по програмуванню починаються з приклада печатки фрази "Hello world" у різних її проявах ("Hello Java", "Hello Perl" і т. п.). Для JavaScript точного аналога такого п дходу знайти не можна. Але ми спробуємо про люструвати на простих прикладах основн прийоми програмування.

Аналогом "Hello world" можна вважати видачу пов домлення в окремому в кн , що породжується при натисканн на г пертекстове посилання:

Приклад 1. Програма видачі простого попередження при виборі гипертекстового посилання. Схема URL - JavaScrip t

<HTML> <HEAD>

^й^Найпфший приклад JavaScript</title>

</HEAD> <BODY>

<center>

<1і1>Мій перший приклад JavaScript</h1>

<hr>

</center>

Утекстцього документа впроваджене г пертекстове посилання <a href="javascript:window.alert('Do you speak English?')"> "Don't click here"

</a>.

Ц каво, що буде, якщо усе-таки вибрати?

</BODY> </HTML>

Уданому прикладі серед тексту документа розташоване гіпертекстове посилання "Don't click here". Якщо неї вибрати при перегляді (кликнути мишкою), то на екрані з'явиться в ікно-попередження з питанням: "Do you speak English?".

Генерація цього в ікна здійснюється спеціальним методом window.alert, що виконується при виборі гіпертекстового посилання. Якщо бути більш точним, то вякості URL інформаційного ресурсу, якім варто завантажити при переході по даному гіпертекстовому посиланню, використовується схема JavaScript - розширення специфікації URI для програмування сценаріїв перегляду гіпертекстових документів World Wide Web. Уцьому випадку виконання JavaScript-програми в ідбувається при вибор г пертекстового посилання, асамкод програми записаний як URL.

Домогтися такого ж ефекту можна й іншим способом, не прибігаючи до нової схеми URL. Для ц ієї мети можна використовувати под я, що генерується програмою-нав гатором при вибор гіпертекстового посилання - Click.

Приклад 2. Програма видачі простого попередження по події Click при виборі гіпертекстового посилання

<HTML> <HEAD>

^ії^Найпфший приклад JavaScript</title>

</HEAD> <BODY>

<center>

<1і1>Мій перший приклад JavaScript</h1>

<hr>

</center>

Утекстцього документа впроваджене г пертекстове посилання <a href="javascript:void(0)" onClick="window.alert('Do you speak English?')">"Don't click here"</a>. Ц каво, що буде, якщо усе-таки вибрати?

</BODY> </HTML>

Об йтися без нової схеми URL тут також не вдається, але вона використовується т льки для того, щоб п сля вибору г пертекстового посилання в робочому пол програми нав гатора не з'являлося порожньої сторінки, чи не приходилося завантажувати знову стару сторінку. Для обробки под ії використовується конструкція onClick, що реалізує звертання до оброблювача (handler) даної події, що усвою чергу викликає виконання коду, записаного сл дом за onClick.

Розміщення коду програми на JavaScript безпосередньо втегахHTML є звичайною справою, але не завжди буває зручним. Найбільше часто JavaScript-код виносять у спеціальний HTML-контейнер SCRIPT(</script>.....</script>). Для того, щоб продемонструвати застосування цього

підходу, видозмінимо наш приклад утакий спосіб:

Приклад З. Застосування контейнера SCRIPT для розміщення JavaScript-коду

<НТМІ> <HEAD>

^ії^Найпфіпий приклад JavaScript</title> <script language="JavaScript"> <!-- Start the text of programme function question()

{

window.alert("Do you speak English?");

}

// -- >

</script>

Інформац йн Технолог ї

О.В.Стрельцов

</HEAD> <BODY>

<center>

<гі1>Мій перший приклад JavaScript</h1>

<hr>

</center>

Утекстцього документа впроваджене г пертекстове посилання <a href="javascript:void(0)" onClick="question()">"Don't click here"</a>. Ц каво, що буде, якщо усе-таки вибрати?

</BODY> </HTML>

Даний приклад розвиває застосування JavaScript-коду для обробки под ії Click. Але тільки вцьому випадку ми не розміщаємо весь код обробки події в атрибуті onClick. У даний атрибут міститься тільки виклик функції, що буде обробляти цю под ію. Саме тіло функції розміщене в заголовку HTML- документа усередині тегов <script ...> і </script>

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

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

Приклад 4. Одержання типу програми перегляду HTML- сторінок

<HTML> <HEAD>

<title>Test of Browser name</title>

</HEAD> <BODY>

<h1 align=center> Перев ірка імені типу браузера;</гі1> <hr>

Для того, щоб одержати м'явашоїпрограми перегляду

вибер ть кнопку "Browser"<br>

<center>

<form name=kuku>

<input type=button name=browser value=Browser onClick="window.alert(window.navigator.appName)">

</form>

</BODY> </HTML>

Дана програма в точності повторює приклад 2.10, але увікні попередження видає і м'я програми перегляду HTML-сторінок (window.navigator.appName). Узагалі говорячи, у простому пов ідомленн і про тип програмного забезпечення великого змісту ні, але якщо вставити перев ірку даного і мені втекст HTML- сторінки і реалізувати умовну компіляцію сторінки, те тоді звертання до даної конструкц ї JavaScript буде виправданим:

Приклад 5. Умовна генерація тексту сторінки по тип і програми перегляду

<HTML> <HEAD>

<title>Test of Browser name</title>

</HEAD> <BODY>

<h1 align=center> Перев ірка імені типу браузера</гі1> <hr>

<script language=JavaScript>

<!--

if(window.navigator.appName == "Netscape")

і

document.write("<br><center><font color=steelblue size=+5>"); document.write(" Увас гарний нав ігатор."); document.write("</font></center>");

}

else

і

document.write("<font color=red size=+3>Hеобидний Netscape Navigator версії 3.0 і вище.</гот>");

window.alert("Down load new version of your browser now.");

}

// -- >

</script>

</BODY> </HTML>

Уданому прикладі текст JаvaScript-програми розміщений безпосередньо втілі документа. При його завантаженн , коли HTML- нтерпретатор доходить до контейнера SCRIPT, викликається JavaScript- нтерпретатор. Уцеймомент буде перев рятися умова, що м ститься в оператор if. У залежност в д результату перев рки ц єї умови нший текст стор нки прийме той чи нший вид у залежності в ід типу програми перегляду. При перегляді даного документа програмою в ідмінної в ід Netscape Navigator буде видане ще в кно попередження.

Узагалі говорячи, пер ев ір ити тип програми пер егляду можна на сервер і пр отоколу HTTP і передати програмі перегляду вже готову сторінку без умовної генеращї її зм істу. Але це можливо тільки втому випадку, коли автор сторінки має можлив ість програмувати на машині де встановлені сервер  має можлив сть адм н струвати цей сервер. Уряд випадк в, коли м сце п д Website орендується йу договорі оренди немає пункту, що забезпечує керування ресурсами сервера, у цьому випадку програми зумовною генерацією змісту сторінок бувають надзвичайно корисними. Інший випадок - це робота в локальному режимі без сервера. Тут JavaScript є єдиним засобом керування переглядом. Існує ще ряд випадків, коли застосування контейнера SCRIPT утілі документа єц ілком виправданим, але на них ми зупинимося пізніше в контексті рішення конкретних задач керування сценар ями перегляду.

Однак, найчастіше, текст JavaScript-коду розміщають увиді опису функцій у заголовку документа, що робить використання такого коду більш зручним. Зв'язано це з двома моментами, які варто враховувати при написанн і JavaScript-програм: область дії опису програми (зяких частин чи документа сторінки вона видна, аотже, на неї можна послатися як на функцію, і принципи нтерпретац ї коду при перегляд документа.

Якщо код розміщається втілі документа, то в ін інтерпретується тільки увипадку перерозмітки в дображуваного документа (завантаження, зм на параметр в в кна, перезавантаження). Якщо текст розм щений у заголовку, то на нього можна послатися збудь-якого м сця документа, аточн ше з будь-якого оброблювача подій, що вказуються як атрибути HTML- тегов.

Повернемося тепер знову до приклада 5, але т льки розм стимо тепер код JavaScript не в текст документа, ав окремому файл :

Приклад б. Розміщення скрипта в окремому файлі (netscapejsc)

<HTML> <HEAD>

<title>Test of Browser name</title>

</HEAD> <BODY>

<h1 align=center>Перев ірка імені типу браузера</гі1> <hr>

<script language=JavaScript src=netscape.jsc> </script>

</BODY> </HTML>

Уданому випадку текст умовної генерації сторінки розміщений у зовнішньому файлі. При завантаженн стор нки цей текст докачується програмою перегляду виповнюється так само, як якби в ін розміщався вдокументі. Цікаво, що при перегляді тексту документа через опцію "View Source" текст скрипта не в дображається, що дає можлив сть сховати його зм ст в д користувача. У самому файлі, що містить конструкції JavaScript, HTML- теги не використовуються:

Приклад 7. Зміст файлу netscapejsc, посилання на який встановлена в атрибуті SCR тега <SCRIPT > із приклада б

if(window.navigator.appName == "Netscape")

і

document.write("<br><center><font color=steelblue size=+5>"); document.write(" Увасгарний нав гатор."); document.write("</font></center>");

}

else

і

document.write("<font color=red size=+3>Hеобхідний Netscape Navigator

версії 3.0 і вище.</гот>"); window.alert("Down load new version of your browser now.");

}

Hz цьому можна закінчити вступну частину, присвячену прикладам JavaScript-коду, і перейти до більш планомірного викладу прийомів програмування на JavaScript, якби не одне "але". Справа вт м, що будь-який автор, що збирається викладати програмування на JavaScript, зустр чається з проблемою поступового нарощування складност приклад в. Матер ал треба починати викладати "в ід грубки", але от цієї самої грубки немає. Усі програми на JavaScript (Client-site JavaScript) - це тією чи іншою мірою програми обробки под ій, що зв'язані зтими чи і ншими інформаційними об'єктами. Без вивчення цих об'єктів не можна починати н ічого програмувати.

Однак, існує лаз івка вцьому зачарованому колі, який ми і скористаємося. Це схема JavaScript універсального локатора ресурсів (URL). Унашихприкладах ми уже використовували цю схему. Вона допомагала нам в ідкривати в ікно-попередження при виборі гипертекстового посилання (приклад 2.10) іуникати перезавантаження сторінок (приклад 2.11). Ми будемо користатися цією схемою виклику JavaScript-коду доти, поки не з'явиться внашому розгляді об'єкт (контейнер HTML) затрибутомобробки под ї.

П ісля цього невеликого в ідступу почнемо розглядати прийоми програмування на JavaScript

в ідпов ідно до і єраряї об'єктів цієї мови, починаючи із самого старшого об'єкта і рухаючи всередину

дерева об'єкт в: в д об'єкта "в кно" до елемент в форми.

Приклади ман пулювання в кнами

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

Методи

Методи дозволяють нам створити на екрані видиме в ікно, закрити в ікно і проробити з ним інші операції. Зметодом window.alert ми вже знайомі. Методи window.confirm і window.prompt використовуються для одержання в ідпов ідей в ід користувача:

Приклад 8. Використання метод і в Alert, Prompt, Confirm

<HTML> <HEAD>

<title>Window simple example</title>

</HEAD>

<BODY>

<center>

<hl>Simple window methods</hl>

<hr>

</center>

<ul>

<li><a hrel="javascript:window.alert('Attention!!! press the button to continue.')">Merofl Alert.</a>

<li><a hrel="javascript:window.status=window.confirm('Answer yes or no.');void(0);"> Метод Confirm.</a>

<li><a href="javascript:window.status=window.prompt('Type string here: ',");void(0);">Метод Prompt.</a>

</ul>

</BODY>

</HTML>

Уданому приклад при виклику методу confirm з'являється в кно зпроханнямп дтвердження деякої дії, при використанні методу prompt - в ікно з запрошенням ввести інформацію вполе введення. Удвохостанн х випадках якщо не указати функц ї void(0), в дбудеться зам щення тексту HTML- документа на значення, що повертають ці два методи. Якщо уважно дивитися за полем в ікна нав ігатора, уякому в ідображається інформація про завантаження документів, то там можна буде побачити значення, що повертаються, тому що вони привласнюються властивост status поточного в кна, що зв'язане саме зцимполем,  якому можна привласнювати значення, , отже, ц значення будуть в дображатися вцьому пол .

Однак, варто визнати, що розглянуті вище методи використовуються вкрай рідко. Атим б льше в приведеному тут контекст , тому посп шимо розглянути методи в дкриття закриття в кна.

Відкрити в ікно можна використовуючи метод open:

Приклад 9. Метод window.open

<HTML> <HEAD>

<title>Window simple example</title>

</HEAD>

<BODY>

<center>

<hl>Open window methods</hl>

<hr>

</center>

Якщо вибрати гіпертекстове посилання

<a href="javascript:window.open('simple8.htm','example','scrollbars, resizable,width=300,height=200');void(0);"> В ідкрити в ікно</a>, те буде в ідкрите нове в ікно. Найчастіше цей прийом використовують при створенні контекстно залежних меню.

</BODY> </HTML>

Уданому випадку при виборі гіпертекстового посилання буде в ідкрите в ікно шириною 300 п кселей висотою 200 п кселей, ув кн не буде н яких стандартних меню нав гатора, у в кно буде завантажений документ simple8.html. Метод open дозволяє також визначити області прокручування, чи наявність в ідсутність стандартних меню нав ігатора і можлив ість зміни розмірів в ікна. Остання можлив ість залежить в ід платформи на який виповнюється скрипт.

Приклад l0. Закрити поточне в кно

<HTML> <HEAD>

<title>Window simple example</title>

</HEAD> <BODY>

<center>

<hl>Close window methods</hl>

<hr>

</center>

Якщо вибрати г пертекстове посилання <a href="javascript:window.close();void(0);"> Закрити в ікно</a>, те дане в кно буде закрито.

</BODY> </HTML>

Уданому приклад як г пертекстове посилання використовується посилання на метод widow.close(), що закриває поточне в кно. На застосуванн метод в open close побудований принцип побудови help. По методу open в дкривається в кно п дказки. Уньогозавантажують текст документа-п ідказки з заздалегідь заготовленим посиланням на закриття в ікна. При виборі цього посилання в кно п дказки закривається, користувач продовжує працювати з основним в кном нав гатора.

Розглянемо ще один метод, зв'язаний зв ікном - метод scroll. Даний метод дозволяє організувати прокручування тексту ув кн .

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

<HTML> <HEAD>

<title>Scroll text</title>

</HEAD>

<BODY>

<center>

<Ы>Прокручування тексту ув ікні навігатор a</h1> <hr>

[<a href="javascript:for(i=0;i<80;i++) {window.scroll(0,i*10)};void(0);"> Прокрутити текст</a>] <hr> </center>

Узагалі говорячи, перев ірити тип програми перегляду можна на сервері протоколу HTTP і передати програмі перегляду вже готову сторінку без умовної генерації її

<hr>

<center>[<a href=#top>Пoвepнyтиcя в пoчaтoк</a>]</center>

</BODY> </HTML>