37. Стилевое оформление.
38. Сценарии. Включение скриптов JavaScript в HTML-страницу. Тэг <script language="JavaScript">. Использование функций. События. Объект Math. Унарные операции ++ - -. Логические выражения и операции отношения. Примеры.
Сценарий — это программный код, который включается в текст страницы в виде исходного текста и выполняется браузером при просмотре страницы. Сценарий может быть написан на языке JavaScript, разработанном фирмой Netscape, или на Visual Basic Script (VBScript), разработанном фирмой Microsoft. Поскольку JavaScript является признанным стандартом, и, что немаловажно, стандартом де-факто (этот язык используется на подавляющем большинстве страниц), то остановимся на нем при рассмотрении примеров.
<SCRIPT> </script>
Этот элемент позволяет отделить текст программы-сценария от остальной информации страницы. Элемент SCRIPT должен включать атрибут language, который определяет язык и может принимать следующие значения:
• javascript — код на языке JavaScript;
• tcl — код на языке Tel:
• vbscript — код на языке VBScript.
Может оказаться удобным хранить тексты программ в отдельном файле. Тогда элемент SCRIPT надо снабдить ссылкой на этот файл:
src='URL"
По традиции файлы, содержащие программы на JavaScript, имеют расширение JS. Атрибут type тоже может указывать на тип языка, хотя его применение не является обязательным. Чтобы соблюсти все правила, внутри элемента можно поместить такое определение:
type="text/javascript"
Одной из особенностей сценариев является возможность изменения содержимого страницы в результате работы программы. Но это только возможность, а не правило. С помощью атрибута defer (который не принимает никаких значений) можно «сообщить» браузеру, что таких изменений внесено не будет. В некоторых случаях это позволяет ускорить загрузку страницы.
Из стандартных атрибутов можно использовать атрибут charset.
Элемент SCRIPT (или ряд таких элементов) может располагаться как внутри секции HEAD, так и внутри секции BODY. Если сценарий находится внутри элемента BODY, возможна ситуация, когда какой-либо браузер, не поддерживающий элемент SCRIPT, воспримет программный код как обычный текст и выведет его на экран.
Чтобы этого не случилось, код сценария вводят как комментарий:
<SCRIPT language="язык">
<!-- Все, что относится к коду сценария -->
</script>
Сценарий выполняется в момент загрузки страницы, то есть когда на экране еще видно ее содержание.
Вывод сообщения в окне (1 вариант)
<
HTML><HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<TITLE>Простейший сценарий</title>
<SCRIPT language="javascript">
alert("Приветствуем вас на этой странице!")
</script>
</head>
<BODY background="fon01.gif">
<BR clear="right">
<P>
<CENTER>
<H1 style="color : maroon">З а г о л о в о к 1</h1>
</center>
Пустая страница
</body></html>
Тот же самый сценарий можно выполнить и другим способом: создать функцию и связать ее с событием. Загрузка страницы соответствует событию onload элемента BODY (Листинг 5.2, Рис. 5.1_1).
Вывод сообщения в окне (2 вариант)
<
HTML><HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<TITLE>Простейший сценарий</title>
<SCRIPT language="javascript">
function DoFirst()
{alert("Приветствуем вас на этой странице!")}
</script></head>
<BODY background="fon01.gif" onload="DoFirst()">
<BR clear="right">
<P>
<CENTER>
<H1 style="color : maroon">З а г о л о в о к 1</h1>
</center>
Пустая страница
</body></html>
<NOSCRIPT> </noscript>
На тот случай, если страница будет просматриваться в браузере, не поддерживающем сценариев, предусмотрен элемент NOSCRIPT. Современные программы просмотра игнорируют его содержимое. Этот элемент можно использовать несколькими способами. Во-первых, внутри него можно разместить предупреждение наподобие следующего: «Ваш броузер не может воспроизвести сценарии, необходимые для просмотра этой страницы!» Во-вторых, внутри элемента можно создать упрощенную версию страницы, без скриптов. В-третьих, можно создать ссылку на другой документ. Элемент NOSCRIPT должен обязательно снабжаться конечным тегом. Из атрибутов допускаются только id и style.
Как и всякий современный язык программирования, JavaScript имеет традиционную часть, включающую операторы присваивания, математические и строковые функции, операторы и объектно-ориентированную часть, к которой относятся объекты, события, свойства и методы.
Синтаксис языка:
Function имя (р1,р2…){тело}
Основной конструкцией языка является функция. Она создается по следующему шаблону:
function ИмяФункции(параметр 1, параметр 2...)
{
Текст, программы
return выражение
}
Обязательными элементами являются: ключевое слово function, круглые скобки; и фигурные скобки, определяющие тело функции. Для выполнения функции достаточно указать ее имя в сценарии, например:
ИмяФункции(параметр)
Внутри функции могут находиться вызовы других функций, и, кроме того, функция может вызывать саму себя. Если функция указана в качестве значения атрибута события, она выполняется, когда происходит соответствующее событие.
С помощью оператора return функция может возвратить определенное значение. Тогда функцию можно использовать в операциях присваивания или проверки условий.
В программе могут использоваться переменные различных типов. Если переменная определена вне функции, она является глобальной, то есть доступной для всех функций страницы. Переменные, определенные внутри функции, являются локальными, действующими только в пределах функции. Разные функции могут независимо использовать локальные переменные с одинаковыми именами. Для определения переменной можно указать ключевое слово var, хотя это и не обязательно:
var Color01 = "red"
Color01 = "red"
Тип переменной определяется в момент присвоения ей значения. Для обозначения строковых констант используются двойные или одинарные кавычки. Два типа кавычек необходимы на тот случай, когда строковая константа содержит символы кавычек, например:
WelcomeMessage = 'Добро пожаловать на сайт компании "Tip Top"'
Числовые значения могут задаваться разными способами:
Х1 = 3.55
F5 = 7.674Е-5
Логические переменные могут принимать значения false (ложь) и true (истина). С помощью квадратных скобок определяются элементы массивов:
mass[23]
Математические операции выполняются следующим образом:
var01 = var02+3 — сложение;
var03 = 10*(var04-var05) — вычисления со скобками.
Для вызова математических функций используется объект Math:
var06 = Math.sqrt(var07) — вычисление значения функции (квадратного корня).
Кроме традиционных операций, можно выполнять операцию поиска остатка от деления, например:
var08=var09 % 4
Существуют унарные операции:
• var10++ — увеличение значения переменной на 1;
• var05-- — уменьшение значения переменной на 1.
В условных или управляющих операторах используются операторы сравнения. Для составления логического выражения, кроме круглых скобок, допустимы следующие знаки:
• ==— равно;
• != — не равно;
• > — больше;
• >= — больше или равно;
• < — меньше;
• <= — меньше или равно.
Кроме них, используются логические операторы:
• ! — логическое отрицание;
• || — логическое ИЛИ;
• && — логическое И.
39. Синтаксис JavaScript. Управляющие операторы do... while, if... else, switch…case… default. Иерархии JavaScript. Использование имен. Объекты-документы и объекты-окна. Использование всплывающих окон. Примеры.
Синтаксис языка:
Function имя (р1,р2…){тело}
Основной конструкцией языка является функция. Она создается по следующему шаблону:
function ИмяФункции(параметр 1, параметр 2...)
{
Текст, программы
return выражение
}
Обязательными элементами являются: ключевое слово function, круглые скобки; и фигурные скобки, определяющие тело функции. Для выполнения функции достаточно указать ее имя в сценарии, например:
ИмяФункции(параметр)
Внутри функции могут находиться вызовы других функций, и, кроме того, функция может вызывать саму себя. Если функция указана в качестве значения атрибута события, она выполняется, когда происходит соответствующее событие.
С помощью оператора return функция может возвратить определенное значение. Тогда функцию можно использовать в операциях присваивания или проверки условий.
Элемент SCRIPT должен включать атрибут language, который определяет язык и может принимать следующие значения:
• javascript — код на языке JavaScript;
• tcl — код на языке Tel:
• vbscript — код на языке VBScript.
Цикл do... while позволяет выполнять программный код до тех пор, пока выполняется условие.
do {
строка 1 ;
строка 2 ;}
while (условие)
Обратите внимание, что тело оператора, так же как и тело функции, выделяется при помощи фигурных скобок. Строки кода (команды, операции присваивания, вызовы функций и др.) завершаются (отделяются друг от друга) точкой с запятой. Данный цикл можно записать и так:
while (условие)
{ строка 1 ;
строка 2 ;
……}
Цикл for используют для того, чтобы выполнить программный код заданное число раз. В качестве примера показана программа, позволяющая создать числовой массив и заполнить его нулями.
var Massiv = new Array();
var n = 25;
for (i=0; i < n; i++) { Massiv[i] = 0;}
В данном примере показан цикл с тремя параметрами: начальным значением счетчика, условием выполнения цикла и командой изменения значения счетчика. Это традиционный способ использования такого цикла, но ни один из параметров не является обязательным. Если отсутствует условие, то цикл станет выполняться до тех пор, пока не будет прерван другим способом. Если отсутствует команда изменения значения счетчика, ее может заменить аналогичная команда в теле цикла. Если количество параметров меньше трех, символы «точка с запятой» определяют, какой параметр используется.
Есть ряд вспомогательных операторов, используемых совместно с циклами. С помощью оператора break можно прервать работу любого цикла. Оператор continue позволяет прервать выполнение цикла и начать проверку условия. В зависимости от условия цикл может быть прерван окончательно или его выполнение может быть начато еще раз.
Условный оператор if... else используется там, где выполнение программы надо поставить в зависимость от значения выражения (условия). Шаблон оператора таков:
if (условие) {
строки кода}
else {
строки кода}
Блок else (выполняемый, если условие имеет значение false), не обязателен
Оператор switch. . . case тоже является условным, но выражение, представляющее собой его параметр, не обязательно должно быть логическим. Оно может принимать любые значения. Важно только, чтобы эти значения были указаны как метки в блоках case. Тогда будет выполнен один из многих вариантов кода. Если значение выражения не равно ни одной метке, выполняется блок default. Ниже приведен шаблон оператора. Обратите внимание, что фигурные скобки использованы только один раз, так как варианты кода разделены операторами case.
switch (выражение) { . .
case метка? :
строки кода ;case метка2 :
• строки кода
default
строки кода}
Идея JavaScript очень проста. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и понятными объектами, которыми являются элементы рабочей области программы Netscape Navigator и контейнеры языка HTML. Собственно объектная ориентированность JavaScript на этом и кончается. Есть только объекты с набором свойств и набор функций над объектами. Последние называются методами. Кроме методов существуют и другие функции, которые больше похожи на функции из традиционных языков программирования и позволяют работать со стандартными математическими типами или управлять процессом выполнения программы. Еще в JavaScript есть события - аналог программных прерываний. Эти события также ориентированы на работу в World Wide Web, например, загрузка страницы в рабочую область Navigator'a или выбор гипертекстовой ссылки. Используя события, автор гипертекстовой страницы и программы ее отображающей может организовать просмотр динамических объектов, например, бегущая строка, или управление многооконным интерфейсом. Описание иерархии классов. Все встроенные объекты JavaScript берут свое начало от рабочей области Netscape, и их можно представить в виде следующей иерархии:
Кроме этих классов объектов пользователь может создавать и свои собственные. Но обычно большинство программ используют эту систему классов и не создают новых.
40. Визуальное Web-проектирование. Режим WYSIWYG. Пакет Microsoft Frontpage и его модификации Microsoft Frontpage 98/2000/2002/2003. Особенности проектирования Web-сайтов во FrontPage. Создание Web-узла с помощью мастеров и шаблонов.
Режим WYSIWYG – what you see is what you get – что ты видишь, то и получаешь.
Инструментальные средства создания web-страниц:
редакторы кода – выделяет различным цветом теги
визуальные редакторы – используется стандартный набор
В 1995 году появилась первая версия front page 1.0. Минусы: для отладки была необходима инсталляции сервера.
2000 год – не требует инсталляции серверов при тестировании
2002 год – мастер интерфейса БД
2003 год – изменения в разработке и кодировке. Эффективная работа, оптимизация html-кода. Минусы: много ссылок на стандартные таблицы стилей, т.е. можно вручную изменить html код следовательно увеличивается время загрузки.
Создание Web-узла — это достаточно трудоемкий процесс, требующий не только больших затрат времени, но и обширных знаний в области разработки. Программа FrontPage идет навстречу разработчикам, предоставляя в их распоряжение средства, призванные сократить до минимума время, затрачиваемое на создание проекта. Среди них большое количество шаблонов и мастеров по созданию Web-страниц, фреймов, Web-узлов и стилей.
Шаблон — это совокупность параметров документа для его многократного использования, иными словами, каркас вашего документа. Выбрав тот или иной шаблон, вы в дальнейшем используете те средства, которые в нем уже заложены. Например, выбрав шаблон Текст одним столбцом (One-column Body), вы получаете страницу, на которой информацию необходимо размещать в одну колонку по центру. В других шаблонах заранее выделены области для размещения текста и графической информации и т. д.
При использовании мастеров возможности вашей разработки расширяются, так как мастер в процессе работы задает вам вопросы и создает Web-узел или Web-страницу на основании ваших ответов, разместив заголовки и часть информации. Таким образом, при использовании мастеров получается проект, приближенный к вашим основным задачам.
FrontPage-компоненты
Компоненты, предоставляемые в распоряжение разработчика программой FrontPage, представляют собой готовые к применению программные модули, для использования которых достаточно разместить компоненты на Web-странице и настроить их свойства. Использование компонентов расширяет функциональные возможности Web-узла, ускоряет разработку и избавляет от необходимости программирования. Перечислим наиболее часто применяемые компоненты:
Подстановка (Substitution) — размещает на Web-странице информацию, задаваемую с помощью переменной. При изменении значения переменной происходит автоматическое обновление данных во всех местах, где эта переменная используется
Страница (include Page) — вставляет содержимое отдельной страницы с периодически обновляемой информацией в другие страницы Web-узла
Страница с расписанием (Scheduled Include Page) — вставляет содержимое отдельной страницы в другие страницы Web-узла на определенный интервал времени
Рисунок с расписанием (Scheduled Picture) — вставляет графическое изображение на страницу Web-узла на определенный интервал времени
Счетчик посещений (Hit Counter) — размещает на Web-странице компонент, позволяющий получить сведения о том, сколько пользователей открывало Web-узел
Форма поиска (Search Form) — позволяет посетителям Web-узла проводить поиск необходимой информации
Оглавление (Table of Contents) — размещает на домашней странице оглавление со ссылками на все страницы Web-узла
Электронная таблица Office (Office Spreadsheet) — добавляет на страницу электронную таблицу, являющуюся объектом Microsoft Office
Диаграмма Office (Office Chart) — добавляет на страницу диаграмму, являющуюся объектом Microsoft Office
Сводная таблица Office (Office Pilot Table) — Добавляет на страницу объект Microsoft Office, позволяющий подключиться к базе данных с помощью OLE DB, просмотреть заданный объект и изменить его содержимое
Для размещения на Web-странице компонентов используется диалоговое окно Вставка компонента веб-узла (Insert Web Component) (рис. 2.4), открываемое командой Веб-компонент (Web Component) из меню Вставка (Insert), а также кнопкой Веб-компонент на стандартной панели инструментов.
Мастера создания Web-узлов
Для запуска мастера по созданию Web-узла выполните следующие действия:
1. В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел (Page or Web). В результате в главном окне программы FrontPage появляется панель Создание веб-страницы или узла (New Page or Web)
2. Выберите на панели значение Шаблоны веб-узлов (Web Site Templates). Открывается диалоговое окно Шаблоны веб-узлов, в котором можно выбрать шаблон или мастер для создания Web-узла
Диалоговое окно содержит одну вкладку Веб-узлы (Web Sites), на которой расположены значки предлагаемых системой шаблонов и мастеров для создания Web-узлов.
3. Выделите значок мастера, услугами которого хотите воспользоваться. При этом в области Описание (Description) появляется краткое описание выбранного мастера.
4. В поле Укажите расположение нового веб-узла (Specify the location of the new web) задайте URL-адрес Web-узла, то есть имя Web-сервера, на котором хотите разместить Web-узел, и имя Web-узла. Имена должны быть разделены символом "/". Например, http://localhost/Corporate. При этом возможны следующие варианты:
Web-сервер установлен на вашем компьютере. В этом случае имя сервера автоматически подставляется в URL-адрес. Серверу также можно присвоить сетевое имя вашего компьютера по умолчанию localhost.
Вы используете Web-сервер своего провайдера, доступный в Интернете. В этом случае в качестве имени сервера вводится его реальный URL-адрес.
Сохраняете Web-узел на своем компьютере. В этом случае в качестве адреса указывается физический путь к нему.
Чтобы установить с Web-сервером безопасное соединение по протоколу SSL, установите в окне Шаблоны веб-узлов флажок Требуется подключение SSL (Secure connection required (SSL)).
5. Нажмите кнопку ОК. Запускается мастер.
Создание Web-узла с помощью мастера осуществляется следующим образом. После запуска мастера на экране поочередно появляются диалоговые окна для ввода параметров создаваемого Web-узла. Вы должны ответить на все предлагаемые вопросы. Ответив на все вопросы мастера, вы нажимаете кнопку Готово. Мастер создает Web-узел и выводит его в главном окне программы для просмотра и редактирования.
Рассмотрим кратко возможности мастеров по созданию Web-узла:
Мастер корпоративного веб-узла (Corporate Presence Wizard). Создает Web-узел, представляющий компанию в Интернете.
Мастер интерфейса базы данных (Database Interface Wizard).
Мастер веб-обсуждения (Discussion Web Wizard). Создает Web-узел, на страницах которого пользователь высказывает свое мнение по поводу проводимой дискуссии. В состав созданного
Шаблоны для создания Web-узлов
Помимо мастеров, при разработке Web-узлов можно и нужно использовать шаблоны. Они помогают создавать типовую структуру Web-узла.
Для создания Web-узла с применением одного из предлагаемых шаблонов выполните следующие действия:
1. В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел (Новая страница или Web-узел).
2. На появившейся панели Создание веб-страницы или узла выберите команду Шаблоны веб-узлов (Web Site Templates).
3. Открывшееся диалоговое окно Шаблоны веб-узлов содержит шаблоны для создания Web-узлов (табл. 3.2).
Таблица 3.2. Шаблоны, используемые для создания Web-узлов
Шаблон |
Назначение |
Одностраничный веб-узел (One Page Web) |
Создает Web-узел, содержащий одну страницу |
Веб-узел поддержки заказчиков (Customer Support Web) |
Создает Web-узел поддержки покупателей вашей продукции, на котором они смогут разместить свои замечания и предложения относительно качества товаров и услуг |
Пустой веб-узел (Empty Web) |
Создает пустой Web-узел |
Личный веб-узел (Personal Web) |
Создает многостраничный персональный Web-узел |
Веб-узел проекта (Project Web) |
Web-узел проекта. Данный шаблон можно использовать как координационный и дискуссионный центр для ведения крупного проекта. На страницах Web-узла можно размещать информацию об участниках проекта, состоянии дел, обсуждать важнейшие вопросы и т.д. |
Веб-узел рабочей группы на основе SharePoint (SharePoint-based Team Web Site) |
Web-узел по сотрудничеству. Содержит календарь событий, библиотеку совместно используемых документов, список контактов, задач и т.п. |
Выделите курсором значок шаблона, услугами которого хотите воспользоваться. При этом в области Описание (Description) появляется краткое назначение выбранного мастера.
4. В поле Укажите расположение нового веб-узла (Specify the location of the new web) введите местоположение и имя создаваемого Web-узла.
5. Нажмите кнопку ОК.
В соответствии с выбранным шаблоном программа FrontPage формирует требуемый шаблон Web-узла и открывает его в режиме просмотра и редактирования. Вы можете приступать к редактированию созданного прообраза Web-узла.