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

Размещено на http://www.allbest.ru

1

Введение

World Wide Web - глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация.

Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.

Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.

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

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

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

Также в данной работе мною рассмотрены основы языков программирования Web-страниц - HTML, который является общепринятым стандартом WWW, и JavaScript. Это даст нам возможность ознакомиться со структурой Web-страницы и приемами ее правильного оформления, и для этой цели я создал Web-сайт - практическую часть реферата.

1. World Wide Web

1.1 Распространение Internet

javascript язык internet

Internet - это самая большая мировая компьютерная сеть. Теперь Internet имеет приблизительно 150 миллионов пользователей более чем в 50 странах. WWW доступен в основном через Internet; но говоря WWW и Internet мы подразумеваем не одно и то же. WWW можно отнести к внутреннему содержанию, то есть это какой-либо абстрактный мир знаний, в то время как Internet является внешней стороной глобальной сети в виде огромного количества кабелей и компьютеров.

Рис. 1

На рис.1 страны, обозначенные черным цветом, имеют связь по Internet. Количество людей, которые имеют такой доступ, в этих странах становится все большее и большее. Страны, обозначенные белым цветом могут работать по e-mail, в локальных сетях или не имеют ничего подобного вообще.

1.2 Концепция WWW

Так что же такое World Wide Web, или, как говорят в просторечии, WWW, the Web, или еще более простое - 3W? WWW - это распределенная информационная система мультимедиа, основанная на гипертексте. Давайте разберем это определение по порядку.

Распределенная информационная система: информация сохраняется на огромном великом множестве так называемых WWW-серверов (servers). То есть компьютеров, на которые установленное специальное программное обеспечение и которое объединенные в сеть Internet. Пользователи, которые имеют доступ к сети, получают эту информацию с помощью программ-клиентов, программ просмотра WWW-документов. При этом программа просмотра посылает по компьютерной сети запрос серверу, который сохраняет файл с необходимым документом. В ответ на запрос сервер высылает программе просмотра этот необходимый файл или сообщение об отказе, если файл по тем или иным причинам недоступен. Взаимодействие клиент-сервер происходит по определенным правилам, или, как говорят иначе, протоколам. Протокол, принятый в WWW, называется HyperText Transfer Protocol, сокращенно - HTTP.

Мультимедиа: информация включает в себя не только текст, но и двух- и трехмерную графику, видео и звук.

Гипертекст: информация в WWW представляется в виде документов, любой из которых может содержать как внутренние перекрестные ссылки, так и ссылку на другие документы, которые сохраняются на том же самом или на любом другом сервере.

Такие ссылки называют гиперссылками или гиперсвязями. На экране компьютера в окне программы просмотра ссылки выглядят как выделенные каким-нибудь образом (например, другим цветом и/или подчеркиванием) участка текста или графики. Выбирая гиперссылки, пользователь программы просмотра может быстро перемещаться от одной части документа к другой, или же от одного документа к другому. При необходимости программа просмотра автоматически связывается с соответствующим сервером в сети и запрашивает документ, на который сделана ссылка. Кстати, идея гипертекстового представления информации должна уже быть хорошо знакома пользователям разных версий системы Microsoft Windows. Именно по этому принципу построена в Windows система подсказок (Help), с той лишь разницей, что гипертекстовая система подсказок Windows не является распределенной.

Итак, Web-страница может содержать стилизованный и форматированный текст, графику и гиперсвязи с разными ресурсами Internet. Чтобы реализовать все эти возможности, был разработанный специальный язык, названная HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста. Документ, написанный на HTML, представляет собой текстовый файл, который содержит собственно текст, несущий информацию читателю, и флаги разметки. Последние представляют собой определенные последовательности символов, которые являются инструкциями для программы просмотра; в соответствии с этими инструкциями программа располагает текст на экране, включает в него рисунки, которые сохраняются в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает вид WWW-документа только тогда, когда он интерпретируется программой просмотра. Об языке HTML будет детально рассказано в следующем разделе, поскольку без знания основ этого языка невозможно создать Web-страницу для публикации в WWW.

2. Создание Web-страницы с помощью языка HTML

2.1 Язык HTML

Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Веб-проекта.

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими броузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.

Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.

HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными броузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

2.2 Структура HTML документа

Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор.

Обычно HTML-документ - это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается.

Все теги начинаются символом '<' и заканчиваются символом '>'. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:

<p>Информация</p>

Здесь стартовым тегом является тег <P>, а завершающим - </P>. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ '/' (слеш).

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

A) Объявление HTML;

B) Заголовочная часть;

C) Тело документа.

A) Объявление HTML

<HTML> и </HTML>. Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> (в самом начале документа), а последним - </HTML> (в самом конце документа).

<HTML>

</HTML>

B) Заголовочная часть.

<HEAD> и </HEAD>. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и </TITLE>.

<HTML>

<HEAD>

<TITLE>Моя первая страница</TITLE>

</HEAD>

</HTML>

C) Тело документа.

Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй - перед тегом </HTML>.

Тело HTML-документа - это место, куда автор помещает информацию, отформатированную средствами HTML.

<HTML>

<HEAD>

<TITLE> Моя первая страница</TITLE>

</HEAD>

<BODY>

......................................

</BODY>

</HTML>

Теперь мы можем написать HTML-код нашей странички:

<HTML>

<HEAD>

<TITLE>Моя первая страница</TITLE>

</HEAD>

<BODY>

Здесь будут мои страницы!

</BODY>

</HTML>

2.3 Форматирование текста

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

Для начала новой строки используется тег <BR> (сокр. от англ. break - прервать). Этот тег приводит к отображению браузером дальнейшего текста с начала следующей строки. Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз.

Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места. Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег <P> (англ. paragraph - абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение <P>, в отличие от <BR>, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка.

Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута="значение". Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег <P> может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выровнен влево ALIGN="left".

Возможны также выравнивания вправо ALIGN="right" и по центру ALIGN="center".

При использовании атрибутов, после форматируемого текста следует использовать закрывающий тег </P>. Если его нет, то новый тег <P> означает закрытие предыдущего, соответственно вложенные <P> невозможны. Выровнить текст по центру возможно также тегом <CENTER>.

Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:

<HTML>

<HEAD>

<TITLE>Моя первая страница</TITLE>

</HEAD>

<BODY>

<P align=center>Здесь будут мои личные страницы!

<P align=left>На них Вы сможете найти:<BR>- рассказ обо мне и о моих увлечениях;<BR>- мои фотографии.

<P align=right>С одной из моих страниц можно будет<BR>отправить мне электронное письмо.

</BODY>

</HTML>

Кроме использования этих тегов, для разрыва строк возможно использование символов конца строк и табуляций в самом HTML-документе. Для этих целей существует тег <PRE>. Весь текст, помещенный между тегами <PRE> и </PRE> будет выводиться без изменений, то есть со всеми концами строк и табуляциями.

Например:

<PRE>Это текст написан

в две строки.</PRE>

В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег <HR> выведет горизонтальную линию единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег <HR> может содержать несколько атрибутов. <HR SHADE> и <HR> дают контурную линию с трехмерным эффектом углубления. <HR NOSHADE> дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселах. Например, 50% - половина ширины страницы, 400 - ширина в 400 пикселов. Атрибут ALIGN может принимать значения, аналогичные его значениям для тега <P>, но выравнивание по умолчанию - по центру. Атрибут SIZE задает толщину линии в пикселах от 1 до 175; по умолчанию 1, но если <HR SHADE>, (линия - контурная), то добавляется толщина, необходимая для трехмерного эффекта углубления.

Линии, наряду с абзацами, позволяют выделить логические фрагменты текста. Но большое количество горизонтальных линий неприятно для посетителя вашей Веб-страницы, поэтому после каждого абзаца их ставить не следует. Они больше подходят для выделения целых разделов.

2.4 Другие функции HTML

Для осуществления связи между HTML - документами применяются гипертекстовые ссылки. Она состоит из двух частей: псевдокнопки и адресной части. Для создания ссылки применяется тег <A>.

Например:

<A HREF=”htpp://www.rustest.ru”>Результаты тестирования</A>

Современный Web - сайт практически не мыслим без графического оформления. Хорошо оформленные сайты привлекают к себе большее число посетителей. Изображение может быть использовано в качестве фона. Уже известный нам тег <BODY> имеет атрибут BACKGROUNG.

Например:

<BODY BACKGROUNG =”back.jpg”>

Изображения так же можно использовать в качестве ссылок.

Популярность WWW приобрела за счёт интерактивности - полноценного диалога между клиентом и сервером. Это достигается за счет наличия форм. Форма начинается с тега <FORM>, а заканчивается - </FORM>. Этог тег имеет несколько атрибутов:

NAME - имя формы.

ACTION - указывает действие, которое будет произведено над введёнными данными.

METHOD - способ посылки данных серверу.

Для организации на своём сайте текстовых сообщений от посетителей необходимо оформить тег формы следующим образом:

<FORM NAME="talk" ACTION="mailto:stp_crazy@mail.ru" METHOD="POST">

Эта форма посылает введённые данные на электронный ящик. Для выполнения этой формы пользователю необходимо нажать на кнопку «Выполнить». Эта кнопка создаётся при помощи тега <INPUT>, атрибут которого TYPE имеет значение SUBMIT.

<INPUT TYPE="SUBMIT" VALUE="Выполнить ">

Для восстановления формы нужно создать кнопку в которой атрибут TYPE будет иметь значение RESET.

<INPUT TYPE="RESET" VALUE="ОЧИСТИТЬ ФОРМУ">

Для создания формы используются строки ввода, кнопки с зависимой и независимой фиксацией, списки, окна для ввода текстового массива.

Всё это представлено в практической части реферата: форма показана в качестве анкеты, а использование ссылок и изображений как фотогалерея.

3. Создание Web-страницы с помощью языка JavaScript

Объектные модели языков сценариев тесно связаны с тэгами HTML. При загрузке страницы HTML в браузер интерпретатор языка создает объекты со свойствами, определенными значениями тэгов страницы. Говорят, что браузер отражает HTML-страницу в свойствах объектов, и иногда этот процесс называют отражением (reflection). Созданные объекты существуют в виде иерархической структуры, отражающей структуру самой HTML-страницы. На верхнем уровне расположен объект window, представляющий собой активное окно браузера. Далее вниз по иерархической лестнице следуют объекты frame, document, location и history, представляющие соответственно фрейм, непосредственно сам документ, адрес загружаемого документа и список ранее загружавшихся документов, и т.д. Значения свойств объектов отражают значения соответствующих параметров тэгов страницы или установленных системных параметров.

Для правильного использования объектных моделей следует четко понимать, как браузер компонует страницы и, тем самым, создает иерархия объектов. При загрузке страницы просматриваются сверху вниз, тем самым последовательно происходит компоновка страницы и ее отображение в окне браузера. А это означает, что и объектная модель страницы также формируется последовательно, по мере ее обработки. Поэтому невозможно обратится из сценария, расположенного ранее какой-либо формы на странице, к элементам этой формы. Всегда следует помнить о том, что браузер последовательно сверху вниз интерпретирует содержимое HTML-страницы.

Еще один аспект работы с объектами языков сценариев заключается в том, что нельзя изменить свойства объектов. Браузер обрабатывает страницу только один раз, компонуя и отображая ее.

Поэтому попытка в сценарии изменить свойство отображенного элемента страницы, обречена на провал. Только повторная загрузка страницы приведет к желаемому результату.

3.1 Общий обзор языка

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющих как на стороне клиента, так и на стороне сервера. Синтаксис языка очень похож на синтаксис языка Java - поэтому его часто называют Java-подобным. Клиентские приложения выполняются браузером просмотра Web-документов на машине пользователя, серверные приложения выполняются на сервере.

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

Клиентские приложения непосредственно встраиваются в HTML-страницы и интерпретируются браузером по мере отображения частей документа в его окне. Серверные приложения для увеличения производительности предварительно компилируются в промежуточный байт-код.

Основные области использования языка JavaScript при создании интерактивных HTML-страниц:

Динамическое создание документа с помощью сценария

Оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер

Создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа

Взаимодействие с пользователем при решении “локальных” задач, решаемых приложением JavaScript, встроенном в HTML-страницу

Как и любой другой язык программирования, JavaScript использует переменные для хранения данных определенного типа. Реализация JavaScript является примером языка свободного использования типов. В нем не обязательно задавать тип переменной. Ее тип зависит от типа хранимых в ней данных, причем при изменении типа данных меняется и тип переменной.

3.2 Типы данных

JavaScript поддерживает четыре простых типа данных:

Целый

Вещественный

Строковый

Булевый, или логический

Для присваивания переменным значений основных типов применяются литералы - буквенные значения данных соответствующих типов.

Целые литералы являются последовательностью цифр и представляют обычные целые числа со знаком или без знака:

123 // целое положительное число

-123 // целое отрицательное число

+123 // целое положительное число

Для задания вещественных литералов используется синтаксис чисел с десятичной точкой, отделяющей дробную часть числа от целой, или запись вещественных чисел в научной нотации с указанием после символа “e” или “E” порядка числа. Пример правильных вещественных чисел:

1.25 0.125e01 12.5E-1 0.0125E+2

Строковый литерал - последовательность алфавитно-цифровых символов, заключенная в одинарные (`) или двойные кавычки (“), например: “Ира”, `ИРА'. При задании строковых переменных нельзя смешивать одинарные и двойные кавычки. Недопустимо задавать строку, например, в виде “Ира'. Двойные кавычки - это один самостоятельный символ, а не последовательность двух символов одинарных кавычек. Если в строке нужно использовать символ кавычек, то строковый литерал необходимо заключать в кавычки противоположного вида:

“It's a string” // Значение строки равно It's a string

Булевы литералы имеют два значения: true и false, и используются для обработки ситуаций да/нет в операторах сравнения.

3.3 Переменные

Каждая переменная имеет имя, которое должно начинаться с буквы латинского алфавита, либо символа подчеркивания “_”, за которым следует любая комбинация алфавитно-цифровых символов или символов подчеркивания. Следующие имена являются допустимыми именами переменных

Temp1

MyFunction

_my_Method

Язык JavaScript чувствителен к регистру. Это означает, что строчные и прописные буквы алфавита считаются разными символами.

Определить переменную можно двумя способами:

Оператором var

Оператором присваивания (=)

Оператор var используется как для задания, так и для инициализации переменной и имеет синтаксис:

var имя_переменной [= начальное_значение];

Необязательный оператор присваивания задает данные, которые содержит переменная. Их тип определяет и тип переменной. Например, следующий оператор

var weekDay = “Пятница”;

задает переменную weekDay, присваивает ей строковое значение “Пятница”, и тем самым определяет ее тип как строковый.

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

3.4 Операторы

Оператор присваивания рассматривается как выражение присваивания, которое вычисляется равным выражению правой части, и в то же время он присваивает вычисленное значение выражения переменной, заданное в левой части оператора.

Арифметические выражения создаются арифметическими операторами (табл. 1).

Таблица 1 Арифметические операторы

Оператор	Название
+	Сложение
-	Вычитание
*	Умножение
/	Деление
%	Остаток от деления целых чисел
++	Увеличение значения переменной на единицу
--	Уменьшение значения переменной на единицу

Кроме простого оператора присваивания (=) существуют сокращенные формы операторов присваивания, совмещенных с арифметическими операторами, в которых производятся арифметические действия над левыми и правыми операндами и результат присваивается переменной, заданной левым операндом. Все они перечислены в табл. 2.

Таблица 2 Сокращенные операторы присваивания

Оператор	Значение
X * = Y	X = X * Y
X / = Y	X = X / Y
X + = Y	X = X + Y
X - = Y	X = X - Y
X % = Y	X = X % Y

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

Операторы сравнения аналогичны таковым в других языках программирования. Их список представлен в табл. 3.

Таблица 3 Операторы сравнения

Оператор	Название
==	Равно
!=	Не равно
>=	Больше или равно
<=	Меньше или равно
>	Строго больше
<	Строго меньше

При использовании этих операторов в выражении оно вычисляется равным true, если соответствующее сравнение верно, в противном случае значение выражения равно false.

Логические операторы представлены в табл. 4. В примерах предполагается, что переменная var1 = `Кит', var2 = `Кот', var3 = false.

Таблица 4 Логические операторы

Оператор	Синтаксис	Описание	Пример
&& (логическое И)	выраж1 && выраж2	Возвращает выраж1, если оно преобразуется или равно false, иначе выраж2	var1 && var2 (равно `Кот') var2 && var3 (равно false)
|| (логическое ИЛИ)	выраж1 || выраж2	Возвращает выраж1, если оно преобразуется или равно true, иначе выраж2	var1 || var2 (равно `Кит') var3 || var1 (равно `Кит') var3 || false (равно false)
! (логическое НЕ)	!выраж	Если выраж равно true, возвращает false; если выраж равно false, возвращает true	!var1 (равно false) !var3 (равно true)

Логические операторы и операторы сравнения используются в операторах цикла и условия для проверки завершения цикла или выполнения определенной группы операторов.

Строковые операторы используются для создания строковых выражений. В JavaScript, собственно говоря, существует только один строковый оператор - оператор конкатенации (соединения) строк (+), если не считать сокращенной формы оператора присваивания со сложением (+=). Этот оператор присоединяет к строковому значению первого операнда строковое значение второго, получая результат, равный соединению строк:

string = “Моя”+”строка”; // Значение переменной string равно “Моястрока”

Условный оператор является единственным оператором, использующим три операнда. Его значением является один из двух операндов, определяемый из условия истинности третьего. Его синтаксис таков:

(условие) ? знач1 : знач2;

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

range = (mark <= 2) ? “Пересдача” : “Зачтено”;

присваивает переменной range значение “Пересдача”, если переменная mark меньше либо равно 2, в противном случае ей присваивается значение “Зачтено”.

3.5 Операторы управления

Кроме перечисленных выше операторов в JavaScript существует большая группа операторов для поразрядных действий с данными. В них содержимое каждого оператора рассматривается как последовательность битов, а не как данные строкового, числового или булевого типов.

Весь набор управления языка можно разбить на три группы:

Операторы выбора, или условные

Операторы цикла

Операторы манипулирования с объектами

Операторы выбора

К этой группе операторов относятся операторы, которые выполняют определенные блоки операторов в зависимости от истинности некоторого булевского выражения. Этот оператор условия if…else и переключатель switch.

Оператор условия if применяется, если необходимо вычислить некоторый блок операторов в зависимости от истинности заданного условия, и имеет следующий синтаксис:

if (условие) {

операторы1

}

[else {

операторы2

}]

Первая группа операторов операторы1 выполняется при условии истинности выражения условие. Необязательный блок else задает группу операторов операторы2, которая будет выполнена в случае ложности условия, заданного в блоке if.

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

В операторе switch вычисляется одно выражение и сравнивается со значениями, заданными в блоках case. В случае совпадения выполняются операторы соответствующего блока case. Синтаксис этого оператора следующий:

switch (выражение) {

case значение1 :

[операторы1]

break;

case значение2 :

[операторы2]

break;

…

default :

[операторы]

}

Если значение выражения в блоке switch равно значение1, то выполняется группа операторов операторы1, если равно значение2, то выполняется группа операторов оператары2 и т.д. Если значение выражения не равняется ни одному из значений, заданных в блоках case, то вычисляется группа операторов блока default, если этот блок задан, иначе происходит выход из оператора switch.

Необязательный оператор break, задаваемый в каждом из блоков case, выполняет безусловный выход из оператора switch. Если он не задан, то продолжается выполнение операторов в следующих блоках case до первого оператора break или до конца тела оператора switch.

Операторы цикла

Оператор цикла повторно выполняет последовательность операторов JavaScript, определенных в его теле, пока не выполнится некоторое заданное условие. В языке существует два оператора цикла: for и while. Они отличаются механизмом организации цикла.

Оператор цикла for позволяет организовать выполнение блока операторов заданное число раз. Он определяет переменную, называемую переменной цикла, которая изменяет свое значение во время выполнения цикла. Условие завершения цикла зависит от значения этой переменной. Оператор имеет следующий синтаксис:

for ([инициал_выражение];[условие];[изменяющее_выражение]) {

[операторы]

}

Параметром инициал_выражение задается и инициализируется переменная цикла. Это выражение вычисляется один раз в начале выполнения цикла. После этого проверяется истинность выражения условие. Если оно истинно, то выполняется блок операторов тела цикла, ограниченного фигурными скобками; вычисляется изменяющее_выражение, содержащее переменную цикла, и снова проверяется истинность выражения условие.

Если оно истинно, то повторяется цикл вычислений, если нет, то оператор цикла завершает свое выполнение.

Цикл while выполняется пока истинно выражение, задающее условие выполнения цикла.

Его синтаксис следующий:

while (условие) {

[операторы]

}

Сначала проверяется истинность условия, заданного в заголовке цикла, а затем выполняются (или не выполняются) операторы тела цикла.

Проверка истинности условия осуществляется на каждом шаге цикла. Использование этого цикла предполагает, что условное выражение окончания цикла меняется в зависимости от вычисленных значений переменных и выражений в теле цикла.

Иногда необходимо завершить цикл не по условию, задаваемому в заголовке цикла, а в результате вычисления некоторого условия в теле цикла. Для этой цели в JavaScript существуют операторы break и continue.

Оператор break завершает выполнение цикла и передает управление оператору, непосредственно следующим за оператором цикла.

Оператор continue прекращает выполнение текущей итерации и начинает выполнение следующей, т.е. в цикле while он передает управление на проверку выражения условие цикла, а в цикле for - на вычисление выражения изменяющее_выражение.

Манипулирование объектами

Четыре оператора JavaScript предназначены для работы с объектами. Это оператор new, создающий новый объект, операторы for…in и with и ключевое слово this.

Оператор for…in позволяет организовать цикл по свойствам объекта JavaScript. Синтаксис его следующий:

for (переменная_цикла in объект) {

[операторы]

}

Этот цикл производит перебор свойств объекта.

В переменной цикла на каждой итерации сохраняется значение свойства объекта.

Количество итераций равно количеству свойств, существующих у заданного в заголовке цикла объекта.

Оператор with задает объект по умолчанию для блока операторов, определенных в его теле.

Это означает, что все встречаемые в операторах этого блока свойства и методы, являются свойствами и методами указанного объекта.

Применение данного оператора избавляет от необходимости указывать иерархию принадлежности объекта и сокращает исходный текст программы.

3.6 Процедуры

Процедура, или функция, - это именованная последовательность операторов, которая инициализируется и выполняется простой ссылкой на имя функции.

Процедура задается оператором function, имеющим следующий синтаксис:

function имя_функции ([параметры] {

[операторы]

}

где имя_функции - любое правильное имя языка JavaScript, параметры - список передаваемых в процедуру параметров, элементы которого отделяются запятыми.

Оператор function только определяет процедуру, но не выполняет ее. Для вызова процедуры достаточно указать ее имя с заданными в скобках параметрами.

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

Процедура может возвращать некоторое вычисляемое в ней значение. В этом случае обычно она называется функцией, и в операторах, определяющих последовательность выполняемых ею действий, обязательно должен присутствовать оператор return, задающий возвращаемое функцией значение. Вызов функции осуществляется аналогично вызову процедуры, но ее можно использовать в выражениях JavaScript.

Обычно все определения процедур и функции задаются в разделе <HEAD> документа. Это обеспечивает интерпретацию и сохранение в памяти всех процедур при загрузке документа в браузер.

3.7 Объекты JavaScript

На самом верхнем уровне иерархии находится объект window, представляющий окно браузера и являющийся “родителем” всех остальных объектов. Расположенные ниже в иерархии объекты могут иметь свои подчиненные объекты. На рис. 2 показана структура объектов клиента (браузера)

Особняком стоит объект navigator с двумя дочерними (подчиненными) объектами. Он относится к самому браузеру, и его свойства позволяют определить характеристики программы просмотра.

Каждая страница в добавление к объекту navigator обязательно имеет еще четыре объекта:

window - объект верхнего уровня, свойства которого применяются ко всему окну, в котором отображается документ.

document - свойства которого определяются содержимым самого документа: связи, цвет фона, формы и т.д.

location - свойства которого связаны с URL-адресом отображаемого документа.

history - представляет адреса ранее загружавшихся HTML-страниц.

Кроме указанных объектов страница может иметь дополнительные объекты, зависящие от ее содержимого, которые являются дочерними объектами объекта document. Если на страницы расположена форма, то все ее элементы являются дочерними объектами этой формы. Для задания точного имени объекта используется точечная нотация с полным указанием всей цепочки наследования объекта. Это возможно, так как объект верхнего уровня имеет свойство, значением которого является объект нижнего уровня. Ссылка на объект осуществляется по имени, заданному параметром NAME тэга HTML.

<FORM NAME=”form1”>

Фамилия: <INPUT TYPE = “text” name = “studentName” size = 20>

Курс: <INPUT TYPE = “text” name = “course” size = 2>

</FORM>

Для получения фамилии студента, введенного в первом поле ввода, в программе JavaScript следует использовать ссылку document.form1.studentName.value, а чтобы определить курс, на котором обучается студент, необходимо использовать ссылку document.form1.course.value.

4. Инструментарий для создания Web-страниц

4.1 HTML-редакторы

Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page 2000. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).

Текстовые редакторы возможно использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует "подсветка" текста..., в общем, работать крайне неудобно.

Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое (особенно это касается Netscape Navigator). Странички получаются какими-то кривыми, поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.

Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области.

Последния версия HTML-редактора этой компании - DreamWeaver 3, который относится к категории WYSIWYG-редакторов, и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и многое другое.

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

Рис. 3 DreamWeaver 3.0

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" ( вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

Следующий редактор - HomeSite 4 - для создания страниц вручную, т. е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, NN, Opera).

HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом браузере будет смотреться одинаково).

Рис. 4 HomeSite 4.0

Еще одна отличительная особенность HomeSite - это его «склейка» с Dreamweaver. HomeSite обладает кнопкой «Dreamweaver», а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для корректировки HTML-кода.

Одним из последних HTML-редакторов является EVR Soft 1st Page 2000 v2.

Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.

4.2 Графика

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

Основная сложность работы с Web-графикой состоит в том, что пропускная способность каналов Интернета, в большинстве случаев, очень низкая и перед вами сразу встанут проблемы - как сделать графический файл небольшой по объему, но хорошего качества, какие программы и приемы использовать при его оптимизации.

Именно этому посвящен раздел о векторные и растровые графических редакторах, которые являются мощным инструментом обработки изображения в умелых руках.

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

Растровая графика представляет собой сетку (растр), ячейки которой называются пикселями. Каждый пиксель в растровом изображении имеет строго определенное местоположение и цвет, следовательно любой объект представляется программой как набор окрашенных пикселов. Это значит, что пользователь, работая с растровыми изображениями, работает не над конкретными объектами, а над составляющими их группами пикселов.

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

Для изображения растровой графики всегда используется фиксированное количество пикселов, т.е. качество растрового изображения напрямую зависит от разрешающей способности оборудования. Это значит, что любое изменение изображения (поворот, увеличение и т.д.) приводит к неизменному искажению картинки и границы объектов получаются неровными.

Векторные изображения формируются на основе математически описанных фигур, называемых векторами, а вид изображения определяется параметрами векторов. Другими словами, векторная графика состоит из кривых, имеющих координаты, цвет и прочие параметры, а также замкнутых областей, заполненных определенным цветом. Границы этих областей также описываются кривыми. Файл с векторной картинкой содержит координаты и параметры кривых.

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

Выводы

Таким образом, мы изучили возможности языка HTML для создания Web-страниц, узнали, какие HTML- и графические редакторы лучше использовать в Web-дизайне, каковы преимущества и недостатки тех или иных программных пакетов. И, наконец, мы выяснили, какие возможности для создания Web-страниц имеет Word из пакета Microsoft Office.

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

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

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

Подводя итог всему выше сказанному, хочется отметить, что HTML стал тем форматом передачи данных, который наиболее полно и качественно удовлетворяет запросы современного общества. Несомненным фактом является и то, что будущее именно за HTML.

Список используемой литературы

1. Румянцев «Сам себе WEB - программист», Москва 2001

2. Левин "Internet для "чайников", Москва 1996.

3. Рассохин Лебедев "World Wide Web - глобальная информационная паутина в сети Internet", Москва 1997.

4. Перри "Секреты World Wide Web", Москва 1996.

5. Уолл "Использование WWW", Москва 1997.

6. Хеслоп "HTML с самого начала", СПб: Санкт-Петербург, 1995 Kevin Werbach. Перевод: Станислав Малишев. - Краткое пособие по HTML, Москва 1998.

Размещено на Allbest.ru

...