Разработка web сайта на основе HTML с использованием JavaScript

Логическое НЕ изменяет значение истина/ложь на обратное. Например, фары включают, когда ! светлеет (то есть когда темнеет).

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

Операции с  одним операндом

Как видно из названия, эти операции осуществляются с одной величиной. К ним относятся:

а префиксное и постфиксное возрастание (increment);

++

а префиксное и постфиксное уменьшение (decrement);

а унарный плюс;

+ а унарный минус.

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

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

Результат использования префиксной операции проще предугадать: если а = 5, то++а + 2 = 8, потому что значение переменной а было увеличено на единицу, прежде чем к нему прибавили число 2. В то же время

--а + 2  =  6,

потому что значение переменной а было уменьшено на единицу, прежде чем к нему прибавили число 2.

Постфиксные операции действуют иначе, поскольку возрастание или убывание производится только после использования старого значения в выражении. Таким образом, если а = 5, то а++ + 2 = 7, потому что увеличение на единицу будет выполнено после вычисления значения выражения. Это справедливо и для следующего выражения:

а--  + 2  =  6,

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

 

Создание сценариев с помощью функций и событий

 

До сих пор ваши сценарии JavaScript состояли из операторов, выполняемых по 
следовательно - от первого до завершающего. Это оптимальное решение для про 
стых сценариев, но в большинстве случаев при загрузке страницы выполнять сце 
нарий целиком не нужно. Например, вы хотите, чтобы несколько операторов были 
задействованы вначале, а остальные - в какой-либо другой момент. Именно тогда 
вам потребуются функции. %

В данной главе рассматриваются  следующие вопросы:

а определение функции;

а применение функций;

а использование событий для  вызова функций;

а обмен информацией;

а оператор return.

Что такое функция

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

function имяфункции()

{

операторы; }

В начале функции помещается слово  function, за которым указывается ее имя (например, yourMessage). После имени ставятся круглые скобки (your-Message () ). Их отсутствие приводит к ошибке.

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

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

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

Ваша первая функция

Пример. Теория может казаться вам слишком сложной, пока вы не перейдете к практике. Давайте сразу создадим первую функцию. Выполните следующие действия:

1. Откройте HTML-шаблон в текстовом редакторе.
2. Напечатайте в блоке SCRIPT слово function и дайте функции имя, например 
   yourMessage (не забудьте о круглых скобках в конце строки):

<script language=" JavaScript ">

< ! - - Маскируемся ! 
function yourMessage ()

// Снимаем маскировку. --> </script>

3. Затем добавьте пару фигурных скобок:

<script language=" JavaScript ">

< ! - - Маскируемся ! 
function yourMessage ()

// Снимаем маскировку. --> </script>

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

4. Далее добавьте простой оператор:

<script language="JavaScript">

<!-- Маскируемся!

function yourMessage()

{

alert("Ваша первая функция!");

}

// Снимаем маскировку. -->

</script>

5. Сохраните результат, откройте его в браузере и посмотрите, что получилось.

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

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

<script language="JavaScript"> <!-- Маскируемся!

yourMessage();

function yourMessage()

{

alert("Ваша первая функция!");

}

// Снимаем маскировку. -->

</script>

Сохраните страницу еще  раз и откройте ее в браузере, чтобы увидеть результат. Появление окна подтверждающих сообщений доказывает, что ваша функция была вызвана и выполнена.

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

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

События

Необходимо сделать так, чтобы  при вызове функций всю работу вместо вас выполняли события. JavaScript - язык, управляемый событиями (event-driven). To есть все происходящее в нем является результатом события или вызывает какое-либо событие. Открытие новой страницы в браузере, перемещение курсора, щелчок мыши - все это относится к событиям. В этой книге вам встретятся четыре их вида:

Q onLoad;

а onclick;

Q onMouseover;

Q onMouseout.

Давайте коротко рассмотрим каждый из них.

Событие onLoad

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

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

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

Событие onClick

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

Событие onMouseover

Это событие похоже на событие onCl ick, но происходит не после щелчка мышью, а после наведения курсора на определенный элемент страницы. Событие onMouseover можно связать практически с любым объектом Web-страницы (текстом, изображением, кнопками, гиперссылками и т.д.). Его также можно использовать, чтобы повысить уровень интерактивности сценария.

Событие onMouseout

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

 

 

Описание  браузеров

Просмотр WEB-страниц

 

Программы, необходимые  для просмотра гипертекста –  браузеры, которые используются не только как средство просмотра, но и  как почтовые программы, а также  как средство загрузки файлов посредствам  FTP. Две основные функции браузеров: просмотр WEB-страниц и редактирования их содержимого (элементы HTML).

В мире создано немало программ для просмотра HTML-документов: Mosaic, Cello, Global Network Navigator, Opera и др. Наиболее популярными браузерами, которые обеспечивают корректный просмотр гипертекста, являются Microsoft Internet Explorer и Netscape Communicator.

 

Microsoft Internet Explorer

 

Этот браузер фирмы Microsoft удобен первую очередь тем, что является полностью русифицированным. В данный момент наиболее распространены 4 и 5 версии этого браузера. Microsoft Internet Explorer (MSIE) настолько тесно интегрирована с Windows, что его трудно назвать автономной программой. Скорее, это один из компонентов операционной системы.

Работа с браузером может  начинаться с подключения к Интернату  или вестись автономно, если все  необходимые файлы находятся  на локальном диске (то есть, диске  своего компьютера). В поле Адрес на панели инструментов указывается URL. Адрес предваряется кодом, который определяет, с какой подсистемой Интерната мы хотим работать. Например, если мы ищем сайт компании Microsoft, то адрес должен быть таким: http//microsoft.com.

Код http указывает на то, что программа должна работать с системой гипертекстовых документов и использовать соответственный протокол (HyperText Transfer Protocol). Но могут быть и другие варианты адреса. Например, адрес с кодом ftp указывает на архив файлов, доступных по FTP, код mailto обозначает адрес электронной почты, а код file – файл на собственном компьютере.

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

Найдя какую–нибудь организацию, вначале  увидим ее «домашнюю» страницу (home page) . На ней есть подчеркнутые надписи – ссылки на другие страницы. Весь комплекс страниц (сайт) велик и его нельзя увидеть целиком. Гиперссылки позволяют передвигаться по страницам или частям одной страницы. Гиперссылкой может быть не только надпись, но и значок, рисунок или часть рисунка. Браузер имеет кнопки «Вперед» и «Назад», которые позволяют вернуться к пройденным страницам. Каждой странице соответствует один или несколько файлов, которые браузер помещает в папку временного хранения (кэш).

Кнопка «Остановить» позволяет прервать загрузку страницы. Применять ее можно в нескольких случаях: 1) Когда страница еще загружается, 2) Когда на странице много графики и нет времени ждать, пока она вся загрузится, 3) Когда браузер пытается открыть несуществующие документы.

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

Кнопка «Назад» позволяет перейти на страницу, которая была открыта ранее. Эта возможность есть не во всяком документе.

Кнопка «Вперед» обеспечивает движение по цепочке просмотренных документов вперед, если были выполнены переходы назад.

«Домашняя страница» (home page)- понятие условное. Каждая фирма, работающая в Сети, имеет свою домашнюю страницу. Адрес домашней страницы указывается в качестве параметра программы и может быть изменен.

 

Поиск в Интернете осуществляется путем перехода к странице поискового сервера.

Кнопка «Избранное» указывает каталог необходимых Web-страниц. Используя эту кнопку, можно добавить текущую страницу в список избранных страниц или дать команду браузеру загрузить любую из страниц, перечисленных в списке.

 

Кнопка «Печать» выводит на печать текущий документ.

Кнопка «Размер» изменяет размер шрифта на текущей странице.

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

WEB-страница часто оборудована средствами электронной почты. Другими средствами «обратной связи» являются формы. Заполнив соответственные поля и щелкнув кнопку «отправить» (которая может иметь в форме название Go, OK, Send, Submit или другое), можно переслать на сервер необходимую информацию. Так, например, происходит заказ товаров в Интернет-магазинах или заполнение анкет во время виртуальных опросов.

С WEB-страницами и их компонентами (например, рисунками) можно поступить, как с обычными документами: сохранять на диске под определенным именем, или распечатывать.

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

Можно иметь и несколько папок  для избранных страниц. Папка Избранное хранит не сами документы, а ссылки на них. Если страница находится не на локальном диске, то для ее просмотра потребуется подключение к сети. В некоторых случаях возникает необходимость иметь копии реальных документов на своем компьютере. На кэш в этом случае полагаться нельзя, так как он регулярно обновляется. Для сохранения просмотренных документов существует несколько команд. При этом копируется не только HTML-документ, но и рисунки.