Контрольна робота 12
Тема: «Прийоми програмування на JavaScript»
Приклад 1. Програма видачі простого попередження при виборі гіпертекстового посилання. Схема URL - JavaScript
<HTML>
<HEAD>
<title> Найперший приклад JavaScript </ title>
</ HEAD>
<BODY>
<center>
<h1> Мій перший приклад JavaScript </ h1>
<hr>
</ Center>
В текст цього документа впроваджена гіпертекстове посилання
<a "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>
<title> Найперший приклад JavaScript </ title>
</ HEAD>
<BODY>
<center>
<h1> Мій перший приклад JavaScript </ h1>
<hr>
</ Center>
В текст цього документа впроваджена гіпертекстове посилання
<A "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>). Для того, щоб продемонструвати застосування цього підходу, видозмінимо наш приклад наступним чином:
Приклад 3. Застосування контейнера SCRIPT для розміщення JavaScript-коду
<HTML>
<HEAD>
<title> Найперший приклад JavaScript </ title>
<script language="JavaScript">
<! - Start the text of programme
function question ()
{
window.alert ("Do you speak English?");
}
/ / ->
</ Script>
</ HEAD>
<BODY>
<center>
<h1> Мій перший приклад JavaScript </ h1>
<hr>
</ Center>
В текст цього документа впроваджена гіпертекстове посилання
<a "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> Перевірка імені типу браузера; </ h1>
<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> Перевірка імені типу браузера </ h1>
<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> Необхідний Netscape Navigator
версії 3.0 і вище. </ font> ");
window.alert ("Down load new version of your browser now.");
}
/ / ->
</ Script>
</ BODY>
</ HTML>
У даному прикладі текст JаvaScript-програми розміщено безпосередньо в тілі документа. При його завантаженні, коли HTML-інтерпретатор доходить до контейнера SCRIPT, викликається JavaScript-інтерпретатор. У цей момент буде перевірятися умова, що міститься в операторі if. У залежності від результату перевірки цієї умови решта тексту сторінки прийме той чи інший вид у залежності від типу програми перегляду.
Взагалі кажучи, перевірити тип програми перегляду можна на сервері протоколу HTTP і передати програмі перегляду вже готову сторінку без умовної генерації її змісту. Але це можливо тільки в тому випадку, коли автор сторінки має можливість програмувати на машині де встановлено сервер і має можливість адмініструвати цей сервер. У ряді випадків, коли місце під Website орендується і в договорі оренди немає пункту, що забезпечує управління ресурсами сервера, у цьому випадку програми з умовною генерацією змісту сторінок бувають надзвичайно корисними. Інший випадок - це робота в локальному режимі без сервера. Тут JavaScript є єдиним засобом управління переглядом. Існує ще ряд випадків, коли застосування контейнера SCRIPT в тілі документа є цілком виправданим, але на них ми зупинимося пізніше в контексті вирішення конкретних завдань управління сценаріями перегляду.
Однак, частіше за все, текст JavaScript-коду розміщують у вигляді опису функцій в заголовку документа, що робить використання такого коду більш зручним. Пов'язано це з двома моментами, які слід враховувати при написанні JavaScript-програм: область дії опису програми (з яких частин документа або сторінки її видно, а отже, на неї можна послатися як на функцію, і принципи інтерпретації коду при перегляді документа.
Якщо код розміщується в тілі документа, то він інтерпретується лише у разі переразметкі відображуваного документа (завантаження, зміна параметрів вікна, перезавантаження). Якщо текст розміщений у заголовку, то на нього можна послатися з будь-якого місця документа, а точніше з будь-якого обробника подій, які вказуються як атрибути HTML-тегів.
Приклад 6. Розміщення скрипта в окремому файлі (netscape.jsc)
<HTML>
<HEAD>
<title> Test of Browser name </ title>
</ HEAD>
<BODY>
<h1 align=center> Перевірка імені типу браузера </ h1>
<hr>
<script language=JavaScript src=netscape.jsc>
</ Script>
</ BODY>
</ HTML>
У даному випадку текст умовної генерації сторінки розміщений у зовнішньому файлі. При завантаженні сторінки цей текст докачує програмою перегляду та виконується так само, як якщо б він розміщувався в документі. Цікаво, що при перегляді тексту документа через опцію "View Source" текст скрипта не відображається, що дає можливість приховати його утримання від користувача. У самому файлі, який містить конструкції JavaScript, HTML-теги не використовуються:
Приклад 7. Зміст файлу netscape.jsc, посилання на який встановлена в атрибуті 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> Необхідний Netscape Navigator
версії 3.0 і вище. </ font> ");
window.alert ("Down load new version of your browser now.");
}
На цьому можна закінчити вступну частину, присвячену прикладів JavaScript-коду, і перейти до більш планомірного викладу прийомів програмування на JavaScript, якби не одне "але". Справа в тому, що будь-який автор, який збирається викладати програмування на JavaScript, зустрічається з проблемою поступового нарощування складності прикладів. Матеріал треба починати висловлювати "від грубки", але ось цієї самої грубки немає. Усі програми на JavaScript (Client-site JavaScript) - це в тій чи іншій мірі програми обробки подій, які пов'язані з тими чи іншими інформаційними об'єктами. Без вивчення цих об'єктів не можна починати нічого програмувати.
Однак, існує лазівка в цьому зачарованому колі, якої ми і скористаємося. Це схема JavaScript універсального локатора ресурсів (URL). У наших прикладах ми вже використали цю схему. Вона допомагала нам відкривати вікно-передупрежденіе при виборі гіпертекстового посилання і уникати перезавантаження сторінок. Ми будемо користуватися цією схемою виклику JavaScript-коду до тих пір, поки не з'явиться в нашому розгляді об'єкт (контейнер HTML) з атрибутом обробки події.
Після цього невеликого відступу почнемо розглядати прийоми програмування на JavaScript у відповідності з ієрархією об'єктів цієї мови, починаючи з самого старшого об'єкта і рухаючись вглиб дерева об'єктів: від об'єкта "вікно" до елементів форми.
Рекомендована література
«Інформатика і освіта», № 8, 2000 Є. В. Давидова.
Пайк М. «Internet в оригіналі» СПб.: BHV-Санкт-Петербург, 1996.
Перрі П. Дж. "Секрети World Wide Web» Київ: Діалектика, 1996.
Шарф Д. «HTML 4.0: Довідник» СПб: Питер, 1998.
Вуд Л. «Web-графіка: Довідник» СПб: Питер, 1998.
Тема: «Прийоми програмування на JavaScript»
Приклад 1. Програма видачі простого попередження при виборі гіпертекстового посилання. Схема URL - JavaScript
<HTML>
<HEAD>
<title> Найперший приклад JavaScript </ title>
</ HEAD>
<BODY>
<center>
<h1> Мій перший приклад JavaScript </ h1>
<hr>
</ Center>
В текст цього документа впроваджена гіпертекстове посилання
<a "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>
<title> Найперший приклад JavaScript </ title>
</ HEAD>
<BODY>
<center>
<h1> Мій перший приклад JavaScript </ h1>
<hr>
</ Center>
В текст цього документа впроваджена гіпертекстове посилання
<A "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>). Для того, щоб продемонструвати застосування цього підходу, видозмінимо наш приклад наступним чином:
Приклад 3. Застосування контейнера SCRIPT для розміщення JavaScript-коду
<HTML>
<HEAD>
<title> Найперший приклад JavaScript </ title>
<script language="JavaScript">
<! - Start the text of programme
function question ()
{
window.alert ("Do you speak English?");
}
/ / ->
</ Script>
</ HEAD>
<BODY>
<center>
<h1> Мій перший приклад JavaScript </ h1>
<hr>
</ Center>
В текст цього документа впроваджена гіпертекстове посилання
<a "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> Перевірка імені типу браузера; </ h1>
<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> Перевірка імені типу браузера </ h1>
<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> Необхідний Netscape Navigator
версії 3.0 і вище. </ font> ");
window.alert ("Down load new version of your browser now.");
}
/ / ->
</ Script>
</ BODY>
</ HTML>
У даному прикладі текст JаvaScript-програми розміщено безпосередньо в тілі документа. При його завантаженні, коли HTML-інтерпретатор доходить до контейнера SCRIPT, викликається JavaScript-інтерпретатор. У цей момент буде перевірятися умова, що міститься в операторі if. У залежності від результату перевірки цієї умови решта тексту сторінки прийме той чи інший вид у залежності від типу програми перегляду.
Взагалі кажучи, перевірити тип програми перегляду можна на сервері протоколу HTTP і передати програмі перегляду вже готову сторінку без умовної генерації її змісту. Але це можливо тільки в тому випадку, коли автор сторінки має можливість програмувати на машині де встановлено сервер і має можливість адмініструвати цей сервер. У ряді випадків, коли місце під Website орендується і в договорі оренди немає пункту, що забезпечує управління ресурсами сервера, у цьому випадку програми з умовною генерацією змісту сторінок бувають надзвичайно корисними. Інший випадок - це робота в локальному режимі без сервера. Тут JavaScript є єдиним засобом управління переглядом. Існує ще ряд випадків, коли застосування контейнера SCRIPT в тілі документа є цілком виправданим, але на них ми зупинимося пізніше в контексті вирішення конкретних завдань управління сценаріями перегляду.
Однак, частіше за все, текст JavaScript-коду розміщують у вигляді опису функцій в заголовку документа, що робить використання такого коду більш зручним. Пов'язано це з двома моментами, які слід враховувати при написанні JavaScript-програм: область дії опису програми (з яких частин документа або сторінки її видно, а отже, на неї можна послатися як на функцію, і принципи інтерпретації коду при перегляді документа.
Якщо код розміщується в тілі документа, то він інтерпретується лише у разі переразметкі відображуваного документа (завантаження, зміна параметрів вікна, перезавантаження). Якщо текст розміщений у заголовку, то на нього можна послатися з будь-якого місця документа, а точніше з будь-якого обробника подій, які вказуються як атрибути HTML-тегів.
Приклад 6. Розміщення скрипта в окремому файлі (netscape.jsc)
<HTML>
<HEAD>
<title> Test of Browser name </ title>
</ HEAD>
<BODY>
<h1 align=center> Перевірка імені типу браузера </ h1>
<hr>
<script language=JavaScript src=netscape.jsc>
</ Script>
</ BODY>
</ HTML>
У даному випадку текст умовної генерації сторінки розміщений у зовнішньому файлі. При завантаженні сторінки цей текст докачує програмою перегляду та виконується так само, як якщо б він розміщувався в документі. Цікаво, що при перегляді тексту документа через опцію "View Source" текст скрипта не відображається, що дає можливість приховати його утримання від користувача. У самому файлі, який містить конструкції JavaScript, HTML-теги не використовуються:
Приклад 7. Зміст файлу netscape.jsc, посилання на який встановлена в атрибуті 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> Необхідний Netscape Navigator
версії 3.0 і вище. </ font> ");
window.alert ("Down load new version of your browser now.");
}
На цьому можна закінчити вступну частину, присвячену прикладів JavaScript-коду, і перейти до більш планомірного викладу прийомів програмування на JavaScript, якби не одне "але". Справа в тому, що будь-який автор, який збирається викладати програмування на JavaScript, зустрічається з проблемою поступового нарощування складності прикладів. Матеріал треба починати висловлювати "від грубки", але ось цієї самої грубки немає. Усі програми на JavaScript (Client-site JavaScript) - це в тій чи іншій мірі програми обробки подій, які пов'язані з тими чи іншими інформаційними об'єктами. Без вивчення цих об'єктів не можна починати нічого програмувати.
Однак, існує лазівка в цьому зачарованому колі, якої ми і скористаємося. Це схема JavaScript універсального локатора ресурсів (URL). У наших прикладах ми вже використали цю схему. Вона допомагала нам відкривати вікно-передупрежденіе при виборі гіпертекстового посилання і уникати перезавантаження сторінок. Ми будемо користуватися цією схемою виклику JavaScript-коду до тих пір, поки не з'явиться в нашому розгляді об'єкт (контейнер HTML) з атрибутом обробки події.
Після цього невеликого відступу почнемо розглядати прийоми програмування на JavaScript у відповідності з ієрархією об'єктів цієї мови, починаючи з самого старшого об'єкта і рухаючись вглиб дерева об'єктів: від об'єкта "вікно" до елементів форми.
Рекомендована література
«Інформатика і освіта», № 8, 2000 Є. В. Давидова.
Пайк М. «Internet в оригіналі» СПб.: BHV-Санкт-Петербург, 1996.
Перрі П. Дж. "Секрети World Wide Web» Київ: Діалектика, 1996.
Шарф Д. «HTML 4.0: Довідник» СПб: Питер, 1998.
Вуд Л. «Web-графіка: Довідник» СПб: Питер, 1998.