ГЛАВА 14. Введение в Web-программирование. Язык JavaScript

ГЛАВА 14. Введение в Web-программирование. Язык JavaScript

Web-дизайн состоит из трех частей: содержимого, представления и поведения. Это мы узнали еще в главе 1. Содержимому была посвящена часть I, представлению — часть II. Теперь настала очередь обсудить поведение.

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

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

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

Примеры Web-сценариев

Язык JavaScript лучше всего изучать, имея перед глазами пару хороших примеров. Поэтому давайте сразу создадим их.

Простейший Web-сценарий

Первый Web-сценарий, который мы напишем, будет совсем простым. Он выведет на Web-страницу текущую дату.

В самом начале этой книги, приступив к изучению HTML, мы создали небольшую Web-страничку 1.1.htm. Найдем ее и откроем в Блокноте. В самом конце ее HTML- кода, перед закрывающим тегом </BODY>, вставим код листинга 14.1.

Листинг 14.1

<SCRIPT>

var dNow = new Date();

var sNow = dNow.toString();

document.write(sNow);

</SCRIPT>

Это Web-сценарий. Мы поместили его прямо в HTML-код Web-страницы.

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

Наш первый Web-сценарий — поведение Web-страницы — работает!

Теперь немного исправим его так, чтобы он выводил дату в привычном для нас формате <число>.<месяц>.<год> (листинг 14.2).

Листинг 14.2

<SCRIPT>

var dNow = new Date();

var sNow = dNow.getDate() +"." + dNow.getMonth() +"." + dNow.getFullYear();

document.write(sNow);

</SCRIPT>

Обновим открытую в Web-обозревателе Web-страницу, нажав клавишу <F5>. Вот теперь дата отображается в привычном формате.