1.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>

<BODY BGCOLOR=white>

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

<SCRIPT LANGUAGE="JavaScript" SRC="hello.js">

</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 у такому виді:

<SCRIPT TYPE="text/javascript">

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

...

</SCRIPT>

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

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

1.1.3. Варіація третя: із переменной і функціями

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

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

<HTML>

<HEAD>

<TITLE>Helio, world!</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var szHelloMsg = "Hello, world!";

function printString(szString)

{

document.write(szString.bold());

}

function printHello()

{

printString(szHelloMsg);

}

//-->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<Hl>JavaScript Test</Hl>

<P>Message:

<SCRIPT LANGUAGE="JavaScript">

<!--

printHello();

//-->

</SCRIPT>

</BODY>

</HTML>

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

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

<SCRIPT LANGUAGE="JavaScript">

<!--

var szHelloMsg = "Hello, world!";

function printString(szString)

{

document.write(szString.bold ());

}

function printHello()

{

printString(szHelloMsg);

}

// -->

</SCRIPT>

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

<SCRIPT LANGUAGE="JavaScript">

<!--

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>";