аудио — и видеофрагментов, к которым вы (и другие пользователи) можете подклю — чаться со своего сайта. Для обращения к потоковому медиа в URL-адрес обычно включается номер порта, например, 8080, как показано ниже:



http://www. yoursite. com:8080/ramgen/AudioClipName. rm



«За кулисами» сетевые приложения ссылаются друг на друга с помощью номе —

ров,’которые программисты называют номерами портов (port numbers). HTTP-брау — зер и сервер, например, обращаются друг к другу как к «приложению, выполняю —

щемуся на порте 80″. Номер порта — это просто значение, которое соответствует конкретному приложению. Номер порта 8080 соответствует серверу потокового

медиа Real Media. При включении в URL номера порта 8080 удаленный сервер посылает запросы не на Web-сервер (который находится на порту 80), а, в данном случае, на сервер потокового медиа.



ПРИМЕЧАНИЕ Если ваш сервер защищен брандмауэром, для того, чтобы ваш сайт мог по — сылать потоковое медиа (или получать запросы на потоковое медиа), может потребоваться разрешить сообщениям проходить сквозь брандмауэр к порту 8080.



Создание потокового медиа

Установив сервер потокового медиа, вы, скорее всего, захотите создавать свои собственные файлы потоковых видео — или аудиоданных. Чтобы создать потоковый аудиофайл, пригодный для использования с RealNetworks, можно воспользоваться

такой программой, как Cool Edit, которую можно выгрузить по адресу http:/ /

www. syntrillium. com (СМ. рИС. 7.22).



ПРАКТИКУМ

Работая с Cool Edit, вы просто открываете аудиофайл и затем выбираете в меню

File | Save a Copy As (Файл | Сохранить копию как…), чтобы сохранить файл в формате

.rm (Real Media). Затем, чтобы поместить файл на свой сайт для трансляции, можно

создать ссылку на аудиофрагмент в HTML-файле, как показано ниже;





Запуск аудиофрагмента

Глава 7. Анимация, звук и видео 375









В Internet можно отыскать несколько программ для преобразования видеофай — лов из одного формата в другой, например, из AVI в QuickTime. Сервер потокового медиа RealNetworks поддерживает видеоформаты MPE G и QuickTime, а также фор —

мат Real Video (файлы с расширением .rm). Чтобы поместить в Web-страницу потоко- вое видео, используется ссылка, аналогичная показанной ниже:

Запуск потокового видео





Создание страницы с Web-камерой



Применение Web-камер для передачи видеоданных в режиме реального време — ни в последнее время резко возросло. В прошлом Web-камеры были нацелены на парки, национальные монументы, городские пейзажи и т. п. Сегодня агентства но — востей нацеливают Web-камеры на городские улицы, чтобы предоставить пользовате — лям сиюминутную информацию о состоянии движения, как показано на рис. 7.23.

Многие компании также нашли способы внедрить Web-камеры в свои Web-сай —

ты, тем самым снабдив посетителей весьма полезными инструментами. Например,

многие детские сады сейчас предлагают страницы, позволяющие родителям «заг — лядывать к ним» в течение дня. Другой пример: тюрьма округа Марикопа в Аризо —

не ИСПОЛЬЗует Web-камеру (http://www. crime. com/info/jailcam. html), чтобы

пользователи могли наблюдать за жизнью заключенных в окружной тюрьме. Боль —

шой перечень Web-камер можно найти по адресу http://www. ispy. nl.

376 Глава 7. Анимация, звук и видео





В создании Web-камеры фактически ничего сложного нет. Для начала потребуется выбрать одну из множества различных камер для подключения к своему компью- теру; кроме того, существуют разнообразные варианты подключения камеры. В за — висимости от типа камеры можно подключить камеру через универсальную после —

довательную шину (USB), карту TV-адаптера или даже через последовательный порт. Чтобы устранить необходимость протягивать кабельную проводку от компь — ютера к камере, некоторые компании, напри —

мер, Х10, чей сайт вы можете посетить по

адресу http://www. xio. com, предлагают бес — проводные камеры, подобные той, которая по — казана на рис. 7.24. Такие камеры могут пере- давать сигнал на расстояние до 30 метров приемнику, подключенному непосредственно к компьютеру.

Запуск видео

анимацию, изображения потребуется сохранить в формате RealPix. С помощью RealPix и SMIL можно постепенно уменьшать или увеличивать контрастность изображения, а также размывать и объединять изображения. На Web-сайте RealMedia доступен для бесплатной выгрузки набор инструментов для авторов, с помощью которого имеется возможность создавать файлы RealText и RealPix.

При загрузке и установке сервера FLealNetworks программа установки поместит

на ваш компьютер несколько SMIL-файлов, просмотреть содержимое которых можно с помощью редактора, такого как Блокнот из Windows. На рис. 7.26 пока —

зан проигрыватель RealPlayer, воспроизводящий файл Africa. smi, который на мо — мент написания этой книги поставлялся вместе с сервером потокового медиа RealNetworks.

















382 Глава 8. JavaScript





I avaScript — это язык написания сценариев, который Web-дизайнеры могут ис —

щ I пользовать для автоматизации многих задач внутри Web-страницы. До появле — ния JavaScript Web-страницы содержали только графику или аудиофайлы, которые Web-браузер должен был отображать на экране или воспроизводить через динами —

ки компьютера. С помощью HTML-дескрипторов можно описывать, как должен выглядеть текст; определять такие элементы, как гиперссылки!, таблицы и формы;

давать Web-браузеру указания отображать содержимое файлов с изображениями,

фильмами или звуками. Однако язык HTML не предусматривает способа «заста —

вить» браузер выполнить последовательность инструкций. В результате, без языка

написания сценариев, подобного JavaScript, Web-страницы не обладают возможно- стями обработки и не способны взаимодействовать с посетителями сайта. Напри — мер, хотя посетители могут вводить информацию в формы, HTML только позволя —

ет браузеру отправить данные на Web-сервер, поскольку язык HTML не имеет встроенных средств проверки информации, набранной или отмеченной посетите — лем в форме, равно как и средств произвести над ней определенные действия.

Поскольку Web-дизайнеры должны обладать возможностью давать Web-браузе — рам указание делать нечто большее, чем простое отображение текста и картинок

и отправка данных форм обратно на Web-сервер, компания Netscape (в сотрудни — честве с Sun Microsystems) разработала язык JavaScript. Хотя JavaScript является языком написания сценариев в том, что он позволяет задать набор команд, ко — торые должен выполнить Web-браузер, с помощью JavaScript нельзя создать вне — шнюю программу, работающую независимо от браузера. По существу, JavaScript называется языком написания сценариев (scripting language), поскольку он позволя —

ет написать сценарий (script), то есть набор инструкций, которому должен следо —

вать браузер. Более того, операторы JavaScript, из которых состоит сценарий, внедряются в HTML-код Web-страницы.

Для написания JavaScript-сценария никаких специальных инструментов не требуется; можно пользоваться тем же текстовым редактором, с помощью кото — рого вы создаете Web-страницы. Кроме того, наиболее популярные Web-браузеры (такие как Netscape Navigator и Internet Explorer) снабжены встроенной поддерж —

HTML & Web Design Tips & Techniques

Этот текст набран прямо в Web-странице —

Глава 8. JavaScript 383







document. write(«Эта строка текста вставлена » +

«оператором JavaScript.

«);

alert(«Мой первый оператор JavaScript говорит: \»Привет, МИР\»!»);

// —





внимание, что Web-браузер выводит на экран окно сообщения

JavaScript



и ждет, прежде чем отобразить текст, идущий после сценария,



внедренного в тело страницы.

мере браузер считывает document. write, что значит, что он должен выполнить метод (функцию) WRITE, связанный с объектом document (то есть текущей Web —

страницей). Таким образом, браузер «записывает» заключенный в кавычки текст

38 4 Глава 8. JavaScript





в скобках на текущую Web-страницу (в предыдущем примере — «Эта строка

текста вставлена оператором JavaScript.»).

Текст, «написанный» оператором JavaScript, отображается на Web-странице между первым и вторым абзацами текста, поскольку в этой точке HTML-кода

Web-страницы браузер находит вызов функции document. writ;e(). Переходя к следующему оператору JavaScript, Web-браузер видит вызов функции вывода окна

предупреждения alert( ) и отвечает на него выводом на экран окна сообщения с

текстом «Мой первый оператор JavaScrip t говорит: «Привет, МИР!»".

Поскольку окно сообщения дает браузеру указание ждать, браузер не будет

считывать и отображать абзац, идущий после сценария, до тех пор, пока посети —

тель не щелкнет на кнопке «ОК» в нижней части окна сообщения.

Дескриптор после последней строки сценария сообщает Web-брау — зеру, что тот больше не должен интерпретировать считываемый текст как опера- торы JavaScript. Следовательно, Web-браузер выведет оставшиеся три строки (в последнем абзаце) на экран. Как и всегда, Web-браузер проходит HTML-код

страницы сверху вниз, слева направо. Следовательно, если вы хотите, чтобы в данном примере Web-браузер выполнил еще один набор операторов после выво —

да на экран последнего абзаца текста, вам потребуется заключить эти дополни — тельные операторы между еще одной парой (начальным и конечным) дескрипто- ров сценария () , размещенных непосредственно перед дескриптором .



Сокрытие сценариев от браузеров, не поддерживающих JavaScript

К сожалению, не все браузеры поддерживают JavaScript. Более того, браузе — ры, не поддерживающие JavaScript, не распознают начальный и конечный дескрипторы сценария ( ) и, следовательно, игнорируют эти дескрипторы. В результате, обнаружив в приведенном ниже HTML-коде

HTML & Web Design Tips & Techniques



document. bgColor=»lightyellow»;

document. fgColor=»magenta»;







Чтобы браузеры, не поддерживающие JavaScript, не выводили на экран опера- торы сценария, заключите операторы сценария между начальным и конечным HTML-дескрипторами комментария () . Например, сценарий в вы —

шеприведенном примере нужно «закомментировать» следующим образом:

Глава 8. JavaScript 38 5









document. bgColor=»lightyellow»;

document. fgColor=»magenta»;

/ / —>

|



Браузеры, не поддерживающие JavaScript, будут игнорировать начальный и конечный дескрипторы сценария ( ) и все, что находится между начальным и конечным HTML-дескрипторами комментария. И наоборот,

браузеры с поддержкой JavaScript игнорируют HTML-дескрипторы комментария,

когда эти дескрипторы находятся между начальным и конечным дескрипторами сценария. (Двойная косая черта (//) в строке над дескриптором —

индикатор комментария JavaScript, используемый для того, чтобы поддерживаю —

щие JavaScript браузеры не принимали двойной дефис (—), с которого начинает —

ся конечный HTML-дескриптор комментария, за JavaScript-код.)



Понятие функций JavaScript

При написании кода программисты обычно группируют связанные между со —

бой инструкции (операторы) в функции. Каждая функция имеет уникальное имя

и должна выполнять одну задачу. Если бы вы, например, писали программу для

обработки текста, вы бы создали одну функцию с именем speiicheck (проверка ор — фографии), которая проверяет документ на наличие орфографических ошибок, вто —

рую функцию — PrintDocument — которая распечатывает одну или несколько копий

документа, и третью — FiieOperations — которая открывает или сохраняет файл.

Помещая операторы JavaScript в Web-документ, вы будете группировать свои операторы в функции. Например, вы можете создать одну функцию, с именем

vaiidateForm, которая проверяет, ввел ли посетитель данные правильного типа

(числовые или текст) во все обязательные для заполнения поля формы. Затем вы

можете создать вторую функцию, caicuiateSaiesTax, которая вычисляет общую стоимость всех товаров, отмеченных в форме, и умножает сумму на действующую

в регионе ставку налога с продаж. Приведенные ниже операторы, например, со —

здают функцию с именем greetvisitor, которая отображает сообщение наподо —

бие «Добро пожаловать на сайт!» в окне сообщения, как показано на рис. 8.2.



function greetvisitor()

{

aler t («Добро пожаловать на сайт!»);

return;

}

Внутри Web-страницы каждая функция JavaScript должна иметь уникальное имя. Определение функции начинается с ключевого слова function, за которым следует имя функции и (необязательный) список параметров в скобках. (Как ис — пользовать параметры для передачи значений функции, вы узнаете в подразделе

«Передача значений в функцию и из функции» далее в этой главе.) После имени функции и (необязательного) списка параметров вы заключаете между левой и пра — вой фигурными скобками ({}) операторы JavaScript, выполняющие задачу функции.

386 Глава 8. JavaScript





Рис. 8.2. Окно сообщения, отображенное поверх Web-страницы при помощи JavaScript-оператора из функции

Большинство написанных вами операторов JavaScript должны завершаться точкой с запятой (;). Поскольку некоторые Web-браузеры игнорируют символы возврата каретки и перевода строки, можно получить непредсказуемый результат, опустив необязательные точку с запятой в конце оператора JavaScript. Чтобы операторы всегда выполнялись надлежащим образом, ставьте точку с запятой (;)

в конце каждого оператора, вне зависимости от того, записываете ли вы операто — ры в сценарии по одному в строке или же записываете в одной и той же строке

по несколько операторов.

В конце каждой функции, перед закрывающей правой фигурной скобкой (}), ставится ключевое слово return. Оператор return — оператор возврата. Как и следует из его названия, он возвращает управление Web-браузером оператору,

вызвавшему функцию. Чтобы вызвать функцию JavaScript, запишите имя функ — ции в выражении или же в виде независимого оператора внутри функции или

сценария. Например, чтобы браузер, начав загружать Web-страницу, вызвал (то есть выполнил) функцию greetvisitor() , вы напишете следующий HTML-код:



HTML & Web Design Tips & Techniques



greetVisitor();

// —>



Обратите внимание, что Web-браузер выводит на экран окно сообщения

JavaScript



и ждет, прежде чем отображать текст, идущий после сценария,



внедренного в тело страницы.