Ваш первый Сайт С использованием РНР-скриптов
ИСПОЛЬЗОВАНИЕ JAVASCRIPT В РНР — СЦЕНАРИЯХ
Составим теперь код главной страницы или витрины нашего магазина (см. рис. 9.1 и листинг 9.3). Сначала разберите этот код (разбор кода сразу после листинга 9.3 в п. 9.4), а потом постарайтесь набрать его самостоятельно. Часть кода (выделено курсивом в листинге) написана на JavaScript (между тегами <script> и </script>). Это калькулятор для подсчета общей стоимости книг, выбранных посетителем. Объясню вкратце, что такое JavaScript и как этот язык используют в сценариях.
JavaScript - это мощный и универсальный язык подготовки сценариев. С его помощью вы можете переделать простейшие web-страницы в динамичные страницы с мгновенным откликом на действия пользователя (например, реагирование на нажатие кнопки на web-странице). Главное достоинство JavaScript - простота в применении. Поскольку частично основой JavaScript послужил язык Java, в нем предусмотрен объектно-ориентированный подход к созданию сценариев, в соответствии с которым мы можем работать как с собственными функциями и объектами, так и со встроенными объектами. JavaScript обеспечивает оперативную реакцию web-страниц на действия пользователя. Вообще, JavaScript предназначен для создания «клиентских» сценариев, т. е. сценариев, выполняемых браузером читателя. Основной частью сценария (программы на языке JavaScript) является описание событий и обработчиков этих событий. События происходят, главным образом, теми или иными действиями пользователя. Например, щелчку мышью на некотором элементе страницы соответствует событие onclick. Если указатель мыши оказывается над какой-либо областью страницы, имеет место событие OnMoitseOver. Таким образом, суть выполнения сценария заключается в воспроизведении реакции на события, происходящие при работе с HTML - документом. Так, в результате щелчка на кнопке может, например, открываться новое окно браузера.
Для добавления сценария JavaScript на web-страницу используется пара тегов <script> и </script>. Все, что находится между этими двумя тегами, браузер рассматривает как сценарий на JavaScript. Тег <script> обязательно должен содержать параметр language="JavaScript", который и определяет язык сценария. Сценарий JavaScript может находиться между тегами head (такие сценарии анализируются браузером в первую очередь), после тега Body (такие сценарии реализуются во вторую очередь), непосредственно в обработчиках событий (сценарии запускаются при выполнении того или иного события), в отдельном файле (можно создать сценарий в отдельном файле с расширением js). Напишем простенький сценарий. Создайте в РНР - редакторе новый PHP-файл и сохраните его в нашей рабочей папке htdocs Под названием java.php. Наберите следующий код: <Html> <Head> <Title>CueHapMH</Title> <Script Language=" JavaScript"> Alert("3T0 Сценарий на JavaScript, Первая запись"); </Script> </Head> <Body>
<script language="JavaScript">
Document. write("3To сценарий на JavaScript, вторая запись");
</script>
<br>
Cinput type="BUTTON" Уа1ие="Нажми меня" 0nclick="alert('3T0 сценарий на JavaScript, третья запись')">
<?php
?>
</body> </html>
Первый сценарий у нас расположен между тегами <head> и </head>. Команда alert выводит специальное окно с сообщением, которое записано у нас в скобках (рис. 9.8). Данный сценарий выполнится сразу после запуска скрипта.
После нажатия кнопки ОК или кнопки закрытия окна выполнится второй сценарий после тега <body>. Команда document.write выводит строку уже в окно браузера. Окно браузера представляет собой объект window. Этот объект содержит другие объекты, например в нашем случае это объект document (наша PHP-страничка). В этом объекте при помощи команды write мы и выводим вторую строку (рис. 9.9).
Это сценарий на JavaScript, вторая запись Нажми меяя |
Рис. 9.9
Наконец, третий сценарий находится в обработчике события onclick. Данное событие наступает при нажатии кнопки. Кнопка создается при помощи тега <input> с параметром type="BUTTON' который указывает, что мы создаем именно кнопку. При наступлении события click (нажатии кнопки), заработает обработчик события onclick и снова появится специальное окно с сообщением.
Можно изменить событие. Пусть, например, при нажатии кнопки изменится цвет фона документа с белого на красный. Измените строку кода: <input type= "BUTTON" value= "Нажми меня" onclick= "alert('3mo Сценарий на JavaScript, Третья запись')"> на следующую строку: <input type="BUTTON" value= "Нажми меня " onclick= "document.bgColor= 'red' ">.
При нажатии на кнопку цвет фона изменится. Мы указали на объект Document и приписали свойству объекта bgColor (заднему фону) красный цвет. Обратите внимание, что название цвета обрамляется в одинарные кавычки, а название Color обязательно должно писаться с большой буквы.
В JavaScript используются и другие обработчики событий. В табл. 9.1 указаны обработчики событий и какие события они обрабатывают.
|
Таблица 9.1. Типы событий и обработчиков
|
Как вы уже поняли, первый и основной объект - это document. Через этот объект можно обращаться ко всем другим объектам на web-странице. Например, первая картинка на web-странице будет иметь имя images[0], вторая Images[l] и т. д. Обратиться, например, к первой картинке можно при помощи команды document.images[0]. У нас, например, на главной странице index.php есть одна картинка. Давайте изменим ее шьрину {width). Откройте в РНР-редакторе нашу главную станицу и перед закрывающимся тегом </body> вставьте строку: <input type= "BUTTON" value= "Нажми меня " onc!ick= "document, images[0].width=200 ">.
Сохраните и запустите скрипт. При нажатии на кнопку внизу страницы наша картинка уменьшится по ширине до 200 пикселей (пропорционально уменьшится и высота). Понятно, что мы обратились к первой картинке и задали ее ширину width в 200 пикселей.
После удалите эту строку из кода главной страницы.
Если у нас на странице содержится форма с именем, например frm, То обратиться к ней можно при помощи команды document.frm. Пусть у нас в форме находится текстовое поле с именем pole и это поле содержит некий текст, тогда, чтобы обратиться к этому тексту, нужно составить команду: Document.frm ("pole").value. Вывести же сам текст в нужном нам месте поможет команда id.innerHTML, где id - идентификатор места, куда вы хотите вывести текст, например <р id=mess></p>. Текст выведется в блоке <р>. Поясню я все это на простом примере. Удалите все в файле java. php. Наберите код:
<html> <head> <title> </title> </head> <body>
<script language="JavaScript">
Function itog() {
Var txt=document. frm("pole").value;
Mess. innerHTML=txt;
}
</script> <br>
<input type="BUTTON" Уа1ие="Нажми меня" onclick="alert(*3To сценарий
На JavaScript')" onmouseover=itog()>
<br>
<form action="java. php" method="POST" name="frm">
<input type="TEXT" name="pole" уа1ие="Этот текст выведется в браузер">
</form>
<Р id="mess"></p>
<?php
?>
</body> </html>
После тега <body> пишем сценарий на JavaScript. Создаем некую функцию itog(). Эта функция присваивает переменной txt содержимое {value) текстового поля с именем pole, которое находится в форме с именем frm. Эта форма у нас создана позже между тегами <form> и </form>. При задании любой переменной в JavaScript перед ней ставится тип этой переменной. В нашем случае - это var. Далее эта функция выводит в браузер содержимое текстового поля там, где указан идентификатор id=mess.
Вот и весь сценарий, но выполнится он не сразу при запуске скрипта. Выполнится он только при вызове в коде функции itog(). Как видно из кода, мы создаем кнопку, при нажатии на которую {onclick) появится специальное окно с сообщением, а вот при событии onmouseover (при перемещении мыши по кнопке) вызывается функция itog(). Запускается первый сценарий JavaScript, где мы писали эту функцию itogQ. В конце кода, после формы, в блоке <р> с идентификатором id=mess и выводится текст из текстового поля формы (рис. 9.10).
Нажни меня | |Этот текст выведете? Этот текст выведется в браузер
Рис. 9.10
Ну, вот и все. Существует масса литературы по JavaScript и при желании вы можете с ней ознакомиться. При помощи этого языка на web-страницах можно будет сделать много интересного. В этой книге, как я уже сказал, нам понадобится JavaScript только для калькулятора, для подсчета общей стоимости книг, выбранных посетителем.
