ЛАБОРАТОРНА РОБОТА № 1

Введення в JavaScript

Як правило, скрипти вставляються безпосередньо в тіло HTML-документа за допомогою спеціального тега <SCRIPT>. . .</SCRIPT> . Браузер аналізує вміст, що знаходиться між цими тегами і для виконання сценарію пускає в хід той чи інший інтерпретатор. Тим не менш, для усунення можливих різночитань і колізій є можливість вказувати мову і його версію безпосередньо в тілі тега скрипта:

<SCRIPT language JavaScript 1.1> ... </SCRIPT>.

Альтернативним і в багатьох випадках корисним варіантом є розміщення скриптів в окремих файлах. Цей підхід найбільш прийнятний при використанні скриптів досить великого обсягу, а також для збереження службових процедур. Якщо ми зберігаємо наш скрипт у файлі з ім'ям filel.js, то включити його в код сторінки ми можемо в такий спосіб: <SCRIPT src="filei. JS"X/SCRIPT>. У цьому випадку між тегами опису скрипта нічого вставляти не потрібно — необхідний код знаходиться у файлі filel.js. Ніщо не заважає нам указувати назву мови і його версію в тезі опису скрипта й у цьому випадку.

Якщо ж браузер користувача не має засобів роботи зі скриптами, то корисно використовувати тег <NOSCRIPT>. . .</NOSCRIPT> для висновку відповідного цьому випадку варіанта вмісту сторінки.

У листинге приведемо приклад, HTML-сторінки з використанням різних варіантів включення скриптів.

Використання скриптов у тілі HTML-документа

<HTML>

<HEAD>

<! - - - Тут дані заголовка -і->

</HEAD>

<BODY>

<!-і-HTML-код -і->

// Код скрипта

</SCRIPT>

<!-і- HTML-код-і->

// Код скрипта мовою JavaScript

</SCRIPT>

<!-і-HTML-код-і->

<!-і- Підключаємо скрипт із зовнішнього файлу-і->

</SCRIPT>

<!-і-А якщо браузер не знає про скрипти ? -->

!!! Ваш браузер не має підтримки скриптів. Радимо обзавестися новим

програмним забезпеченням !!!

</Н1>

</CENTER>

</NOSCRIPT>

</BODY>

</HTML>

Зауваження

У листинге використаний HTML-тег <!-і- -і-> . Це тег коментарю. Весь текст між відкриваючим <! — і закриваючим —> символами тега коментарю носить чисто інформативний характер і ігнорується браузером при відображенні документа. Як і в багатьох інших мовах, коментар у HTML може служити для тимчасового відключення деяких ділянок коду при налагодженні.

1. Сім варіацій на тему "Hello, world!"

1.1. Варіація перша: найпростіша

Перша програма JavaScript вставить слова Hello, world! безпосередньо в документ HTML. У листинге 1.1 приведений вихідний текст документа з першою програмою, складеної на JavaScript.

Листинг 1.1. Файл chapter 1/heBo/heUo.html

<HTML>

<HEAD>

<TITLE>Hello, world!</TITLE>

</HEAD>

<Hl>JavaScript Test</Hl>

<!--

document.write("Hello, world!");

-->

</SCRIPT> </BODY> </HTML>

Документ HTML обмежений операторами <HTML>, </HTML> і складається з двох розділів. Розділ заголовка виділяється операторами <HEAD> і </HEAD>, а розділ тіла документа - операторами <BODY BGCOLOR=white> і </BODY>.

У заголовку оператор <BODY BGCOLOR=white> встановлює білий колір тіла документа, а оператори <Н1> і </Н1> задають стильове оформлення першого рядка документа "JavaScript Test", що служить рядком заголовка першого рівня.

Власне програма JavaScript у першому прикладі вбудована в документ HTML за допомогою операторів <SCRIPT> і </SCRIPT>:

<!--

document.write("Hello, world!");

//-->

</SCRIPT>

За допомогою оператора <SCRIPT> можна вмонтувати в документ сценарій, складений мовою JavaScript чи VBScript. Мова вказується за допомогою параметра LANGUAGE.

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

Перед символами --> записані два символи /. Інтерпретатори мови JavaScript, вбудовані в Microsoft Internet Explorer і Netscape Navigator, ігнорують символи , то тут поводження основних конкуруючих браузерів розрізняється. Microsoft Internet Explorer ігнорує рядок, що складається только із символів -->, a Netscape Navigator розглядає її як помилкову.

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

Перша програма містить тільки один рядок:

document.write("Hello, world!");

Для об'єкта з ім'ям document викликається метод write з параметром - текстовим рядком "Hello, world!". Рядок закривається символом "крапка з комою", хоча цей символ може бути і відсутнім.

Об'єкт document - це документ HTML, завантажений у вікно браузера. Він містить у собі об'єкти, властивості і методи, призначені для роботи з елементами цього документа HTML, а також для взаємодії з іншими об'єктами.

Метод write програми записує в тіло документа HTML привітальний рядок "Hello, world!". При цьому документ буде виглядати так, начебто цей рядок знаходиться в ньому на місці сценарію:

<HTML>

<HEAD>

<TITLE>Hello, world!</TITLE>

</HEAD>

<Hl>JavaScript Test</Hl>

Hello, world!

</BODY>

</HTML>

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

1.2. Варіація друга: з секретним вихідним текстом

Вихідний текст сценарію, розташований у документі HTML, легко доступний для перегляду будь-якому користувачу, що завантажив цей документ у браузер - досить вибрати в меню View рядок Source (для браузера Microsoft Internet Explorer) чи Document Source (для браузера Netscape Navigator).

Якщо користувачі працюють із браузером Microsoft Internet Explorer версії 4.0 чи з браузером Netscape Navigator, то параметр SRC оператора <SCRIPT> дозволяє вказувати адреса URL файлу сценарію.

У листинге 1.2 знаходиться вихідний текст документа HTML, що містить посилання на файл сценарію hello.js.

Листинг 1.2. Файл chapterl/SecretHello/SecretHello.html

<HTML>

<HEAD>

<TITLE>Secret Hello</TITLE>

</HEAD>

<Hl>JavaScript Test No. 2</H1>

</SCRIPT>

</BODY>

</HTML>

Посилання оформлене з застосуванням операторів <SCRIPT> і </SCRIPT>, однак між цими операторами немає жодного рядка вихідного тексту. Цей текст перенесений у файл hello.js (листинг 1.3).

Листинг 1.3. Файл chapterl/SecretHello/helIo.js

document.write("<HR>");

document.write("Hello from JavaScript!");

document.write("<HR>");

У параметр SRC приклада задане тільки ім'я файлу, тому що він знаходиться у тому ж каталозі, у якому знаходиться і файл документа HTML, що посилається на його; можна вказати і повну адресу URL, наприклад:

<SCRIPT LANGUAGE="JavaScript"

SRC="http://www.myserver.ru/scripts/hello.js">

Істотно, щоб файл, у якому знаходиться вихідний текст сценарію JavaScript, мав тип js. Якщо текст сценарію розташований в окремому файлі, то його можна підключати зазначеним вище образом у різні документи HTML.

У результаті роботи другої програми у вікні браузера Netscape Navigator з'явиться рядок Hello from JavaScript!, виділена зверху і знизу горизонтальними лініями (мал. 1.2).

У HTML версії 4.0 при використанні оператора <SCRIPT> замість параметра LANGUAGE рекомендовано вказувати стандартний параметр TYPE у наступному виді:

// рядка сценарію JavaScript

...

</SCRIPT>

Цей спосіб працює в браузерах Microsoft Internet Explorer версії 3.02, 4.0 і Netscape Navigator версії 3.01.

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

1.3. Варіація третя: з змінної і функціями

У сценаріях JavaScript активно застосовують функції і змінні. Нижче приведений вихідний текст простої програми, у якій використовується одна змінна і дві функції (листинг 1.4).

Листинг 1.4. Файл chapterl/HelloFn/HelloFn.html

<HTML>

<HEAD>

<TITLE>Helio, world!</TITLE>

<!--

var szHelloMsg = "Hello, world!";

function printString(szString)

{

document.write(szString.bold());

}

function printHello()

{

printString(szHelloMsg);

}

//-->

</SCRIPT>

</HEAD>

<Hl>JavaScript Test</Hl>

<P>Message:

<!--

printHello();

//-->

</SCRIPT>

</BODY>

</HTML>

Ця програма записує в документ повідомлення Hello, world!, виділяючи его жирним шрифтом (мал. 1.3).

В області заголовка документа розташоване визначення однієї змінної і двох функцій, оформлене з застосуванням операторів <SCRIPT> і </SCRIPT>:

<!--

var szHelloMsg = "Hello, world!";

function printString(szString)

{

document.write(szString.bold ());

}

function printHello()

{

printString(szHelloMsg);

}

// -->

</SCRIPT>

У тілі документа HTML є ще один розділ сценаріїв, виділений аналогічним образом:

<!--

printHello();

// -->

</SCRIPT>

Змінна з ім'ям szHelloMsg визначається за допомогою оператора var, причому їй одразу ж привласнюється початкове значення - текстовий рядок Hello, world!

Мова JavaScript не є типізованим - програміст не може вказати явно тип створюваних їм змінних. Цей тип визначається інтерпретатором JavaScript автоматично, коли змінної в перший раз привласнюється яке-небудь значення. Надалі можна легко змінити тип змінної, просто привласнивши їй значення іншого типу.

Крім змінної szHelloMsg в області заголовка документа HTML визначені за допомогою ключового слова function дві функції з іменами printString і printHello. Перша з цих функцій виводить у документ HTML рядок, переданий їй як параметр, а друга виводить повідомлення Hello, world!, викликаючи для цього першу функцію.

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

При вивченні приведеного в листинге 1.4 вихідного тексту, треба звернути увагу на функцію printString:

function printString(szString)

{

document.write(szString.bold());

}

Тут для об'єкта document викликається метод write. Як параметр передається цьому методу об'єкт szString, викликом для нього методу bold. Після того, як привласнено змінній значення текстового рядка, вона стала об'єктом вбудованого класу текстових рядків, для якого визначені декілька методів.

Щоб виділити повідомлення жирним шрифтом, можна використовувати і звичайну конструкцію мови HTML:

var szHelloMsg = "<B>Hello, world!</B>";

1.4. Варіація четверта: створення сторінки "на лету"

Наступний сценарій має одну цікаву особливість: в утримуючому його документі HTML немає області <BODY> (листинг 1.5).

Листинг 1.5. Файл chapterl/HelloGen/HelloGen.htmI

<HTML>

<HEAD>

<!--

document.write("<TITLE>Hello, world!</TITLE>");

document.write("<BODY BGCOLOR=white>");

document.write("<Hl>JavaScript Test</Hl>");

document.write("Hello, world!");

document.write("</BODY>");

//-->

</SCRIPT>

</HEAD>

</HTML>

Документ HTML не містить нічого, крім сценарію JavaScript.

Коли такий документ завантажується у вікно браузера, програма JavaScript формує відсутню частину заголовка (за допомогою операторів <TITLE> і <TITLE>), а також тіло документа.

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

1.5. Варіація п'ята: з діалоговою панеллю

Мова JavaScript має вбудовані засоби для відображення найпростіших діалогових панелей, таких, як панель повідомлень.

У листинге 1.6 приведений вихідний текст сценарію JavaScript, у якому викликається функція alert, призначена для відображення діалогових панелей з повідомленнями.

Листинг 1.6. Файл chapterl/HelIoBox/HelIoBox.html

<HTML>

<HEAD>

<!--

document.write("<TITLE>Hello, world!</TITLE>");

document.write("<BODY BGCOLOR=white>");

document.write("<Hl>JavaScript Test</Hl>");

alert("Hello, world!");

document.write("</BODY>");

//-->

</SCRIPT>

</HEAD>

</HTML>

Для продовження завантаження сторінки необхідно натиснути кнопку ОК. Тільки після цього вміст сторінки ( що складає ться в даному випадку з одного рядка заголовка) з'явиться на екрані.

1.6. Варіація шоста: обробка події

У мові JavaScript є засоби обробки подій. У наступному прикладі, коли користувач намагається вибрати посилання Select me!, розмістивши над нею курсор миші, на екрані з'являється діалогова панель Microsoft Internet Explorer з повідомленням Hello, world!.

Вихідний текст відповідного документа HTML з вбудованим у нього сценарієм представлений у листинге 1.7.

Листинг 1.7. Файл chapterl/HelloOnSelect/HelloOnSelect.html

<HTML>

<HEAD>

<TITLE>Hello from JavaScript!</TITLE>

</HEAD>

<Hl>JavaScript Test</Hl>

<HR>

<A HREF="" onMouseover="alert('Hello, world!'); ">Select mе!</А>

</BODY>

</HTML>

Цікавий рядок оператора <А> - цей оператор звичайно застосовується для організації посилань на інші документи HTML чи файли різних об'єктів. У даному випадку поле посилання параметра HREF порожнє, однак додатково в оператор <А> включений наступна конструкція:

onMouseover="alert('Hello, world !');"

Вона вказує, що при виникненні події onMouseover повинна виконуватися наступна рядок програми JavaScript:

alert('Hello, world!');

Рядок заданий не в подвійних лапках, а в одинарних. У сценаріях JavaScript припустимо використовувати ті й інші лапки, однак закриваючі лапки повинні бути такі ж, як і відкриваючі. Внутрішня пара лапок повинна відрізнятися від зовнішньої.

1.7. Варіація сьома: з визначенням типу браузера

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

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

Листинг 1.8. Файл chapterl/HelloInfo/HelloInfo.html

<HTML>

<HEAD>

<TITLE>Hello, world!</TITLE>

</HEAD>

<Hl>Something about you...</Hl>

<TABLE>

<!--

document.writeln("<TR><TD>Navigator Name :</TD><TD>"

+ navigator.appName.bold() + "</TD></TR>");

document.writeln("<TR><TD>Navigator Code

Name :</td><td>"

+ navigator.appCodeName.bold() + "</TD></TR>");

document.writeln("<TR><TD>Navigator version : </TD><TD>"

+ navigator.appVersion.bold() + "</TD></TR>");

document.writeln("<TR><TD>User agent :</TD><TD>"

+ navigator.userAgent.bold() + "</TD></TR>");

//-->

</SCRIPT>

</TABLE>

</BODY>

</HTML>

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

Об'єкт navigator - це сам браузер. Звертаючись до властивостей цього об'єкта, можна одержати різну інформацію про браузер.

Цікаві властивості navigator.appName і navigator.appVersion, тому що вони дозволяють однозначно визначити тип браузера і его версію. Володіючи цією інформацією, можна динамічно "пристосувати" документ HTML до навігатора, встановленому в користувача.

1.8. Індивідуальні завдання на лабораторну роботу №1

1.8.1. Загальне завдання для всіх студентів. Перевірити наявність браузера MS Internet Explorer, простого редактора для модифікації вихідних текстів Notepad і вбудованого інтерпретатора JavaScript.

1.8.2. Індивідуальне завдання для кожного студента. На основі листингов 1.1-1.8 підготувати і налагодити код JavaScript, у якому передбачити реалізацію індивідуального завдання. Вибір варіанта завдання здійснюється з таблиці 1 на підставі номера залікової книжки студента. У завданні кожного студента – сім задач (по числу рядків). Номер варіанта кожної конкретної задачі виходить як залишок від розподілу числа з двох останніх цифр номера залікової книжки на число варіантів конкретної задачі, збільшений на «1». Наприклад, для номера зачіткі «ХХХ21», другої задачі «Розміщення файлу *.js», що має п'ять варіантів, обираний варіант буде дорівнює:

Вар.=(21%5)+1=1+1=2.

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

Таблиця 1

Завдання	Варіант 1	Варіант 2	Варіант 3	Варіант 4	Варіант 5	Варіант 6	Варіант 7
Індивідуальні реквізити	Дата народження	Адреса	Група	JS важливий? (так/ні)	Переваж. ОС	Середній бал	Тема диплома
Розміщення файлу *.js	У поточному каталозі	У батьківському каталозі	У дочірньому каталозі	У кореневому каталозі	У каталозі сусідньої від кореня гілки
Число обумовлених змінних і функцій	3 текстових змінних, 2 функції	2 текстових і 1 числова змінні, 1 функція	1 текстова і 2 числових змінних, 1 функція	1 текстова, 2 числових змінні, 2 функції	2 текстових і 2 числових змінні, 1 функція	2 текстових і 1 числова змінні, 1 функція	3 текстових і 1 числова змінні, 1 функція
Динамічне формування тіла документа (на лету)	Формиро-вать	Не формувати	Формиро-вать	Не формувати	Формиро-вать	Не формувати	Формиро-вать
Зміст діалогової панелі alert	Номер зачіткі і ФИО	Номер зачіткі і група	Номер зачітки і середній бал	Номер зачіткі і ПІБ	Номер зачітки і група	Номер зачітки і середній бал	Номер зачіткіи і ПІБ
Зміст діалогової панелі обробки події (курсор мишки)	Адреса	JS важливий? (так/ні)	Переваж. ОС	Тема диплома	Припустиме місце роботи	Переважаєме місце відпочинку	Адреса
Зміст інформації про браузер	Тип і версія браузера	Тип і версія браузера	Тип і версія браузера	Тип і версія браузера	Тип і версія браузера	Тип і версія браузера	Тип і версія браузера