Мы уже знакомились с языком программирования JavaScriptи выполняли некоторые задачи с использованием этого языка.
Язык JavaScriptявляется отдельным языком и имеет с Javaобщего не более, чем с языком PHP или языком ActionScript (язык платформы Flash).
Значение языка JavaScriptв веб-разработке достаточно большое. Из JavaScriptможно получить доступ ко всем HTML-тегам и CSS-свойствам веб-страницы, также отреагировать на различные действия пользователя по отношению к просматриваемой веб-странице.
Программный код JavaScriptвыполняется браузером! Рассмотрим общую схему веб-проекта(см. рис. 10.11):
Рис. 10.11
Веб-сайт находится на веб-сервере, там же находится база данных.Программный код PHPвыполняется на веб-сервере.Получается так, что для пользователя,открывшего сайт через браузер, база данных и код PHPявляются недоступными. PHPобращается к базе данных, формирует веб-страницу и результат его деятельности передается в браузер пользователя. В результате HTML, CSS, все файлы картинок,Flash-ролики,программный код JavaScript передаются в браузер пользователя.Браузер на основании полученного HTML и CSSвыстраивает страницу,вставляет в страницу полученные изображения и Flash-ролики и выполняет код JavaScript. Для обработкиHTML и CSS браузер использует так называемый "движок браузера"–это сложная программная часть, которая позволяет отобразить страницу на основании HTMLи CSS. Для выполнения кодаJavaScript в браузере имеется интерпретатор.Пользователь сайта может просмотретьHTML, CSS и кодJavaScript. Поэтому код JavaScriptявляется ненадежным, нельзя возлагать на JavaScriptважные проверки,например, такие как проверки паролей.
Код PHP,в отличие отJavaScript, является надежным, потому что выполняется на веб-сервере. В браузер пользователя код PHP не передается!Поэтому все важные проверки выполняются из PHP.
Если сравнить JavaScript c Flash, то во многом их предназначение схоже. Рекламный баннер можно создать как при помощи Flash, так и с помощьюJavaScript.Взаимодействие с пользователем можно выполнять при помощи любой из этих технологий.
Отличия Flash отJavaScript:
1. Flashвыполняется при помощи виртуальной машины Flash Player, а JavaScriptвыполняется браузером.
2. JavaScriptимеет прямой доступ ко всем HTML-тегам страницы, а Flashявляется отдельным приложением, которое вставляется в веб-страницу.
3. JavaScript поддерживается мобильными устройствами, а Flash, как правило,нет.
Выбор между Flashи JavaScriptзависит от конкретной задачи.
В веб-разработке также имеется понятие события и обработки события (как и в разработке обычных приложений на Java).Обработка событий осуществляется с помощью JavaScript.
Пример:пользователь наводит курсор на пункт меню–из JavaScript можно отследить это событие и отреагировать.
Важно!!!Такую задачу нельзя выполнить при помощи PHP, потому что действие пользователя происходит в браузере – на компьютере пользователя.Для подключения обработчика события используются атрибуты тегов!
Рассмотрим несколько видов событий:
onclick- при нажатии (клавишей Enter или левой кнопкой мыши)
ondblclick-двойной щелчок кнопкой мыши
onkeydown - при нажатии клавиши
onkeyup- при отпускании клавиши
onmousedown-при нажатии кнопки мыши
onmouseup - при отпускании кнопки мыши
onmousemove-при перемещении курсора мыши
onmouseover-при входе курсора мыши внутрь
onmouseout - при выходе курсора мыши наружу
С подобными событиями мы уже работали из Java.
Для подключения обработчика события к тегу, нужно добавить атрибут с выбранным событием:
<bodyonkeydown="alert('OK!');" >
Данный пример подключает событие при нажатии на клавишу.Значением атрибута в двойных кавычках– является кодJavaScript:
alert('OK!');
Вывод сообщения пользователю. Обработчик события,подключенный к тегу body,работает для всей веб-страницы.Обратите внимание, что кавычки, записанные внутри двойных кавычек –записываются в виде одиночных кавычек!
Как и код CSS, программный кодJavaScriptрекомендуется записывать в отдельном файле. Файлы с JavaScriptимеют расширение: JS. Добавим файл JavaScript к нашему проекту.Для этого нажмем на заголовок проектаpuhправой кнопкой мыши. В появившемся меню выберем:New, Прочие . . . (см. рис. 10.12)
Рис. 10.12
В появившемся окне нужно открыть ветвь JavaScriptи выбрать JavaScript Source File (см. рис. 10.13).
Рис. 10.13
Нажимаем кнопку Далее. В следующем окне вводим имя файла: puh.js и нажимаем Готово(см. рис. 10.14):
Рис. 10.14
К проекту добавится новый файл: puh.js(см. рис. 10.15):
Рис. 10.15
В этом файле мы будем размещать код JavaScript. Для подключения файла с JavaScript используется тегscript:
В атрибуте src указывается путь к файлу puh.js. Этот тег следует разместить внутри тега head в файле index.php. Выполним это действие (см. рис. 10.16)
Рис. 10.16
При использованииJavaScriptнужно обязательно учитывать, что пользователь в настройках браузера может отключитьJavaScript. В этом случае, код JavaScriptне будет выполняться. Для проверки включен или выключен JavaScriptиспользуется специальный тегnoscript:
<noscript>
ВключитеJavaScript!
</noscript>
Содержимое этого тега будет выводиться на страницу при выключенном JavaScript.
Если сайт не может правильно функционировать без JavaScript, то при входе на сайт, в теге head,необходимо разместить проверку на включение/выключение JavaScriptв браузере:
При отключенном JavaScript произойдет переход по адресу, указанному в url, в данном случаеno_js.php. На странице no_js.phpнужно сообщить пользователю об отсутствииJavaScript. Таким образом, пользователь не сможет зайти на сайт, пока не включит JavaScript. Такая проверка имеется на сайтах социальных сетей,которые интенсивно используют JavaScript. Стоит отметить,что в большинстве случаев JavaScriptвключен в браузере!
Рассмотрим некоторые способы применения JavaScript. Если у тега имеется атрибут id, то к нему можно обратиться по идентификатору:
// Находим тег по идентификатору id
var tmp = document.getElementById("id_menu");
Служебное слово: varговорит о том, что объявляется переменная. Тип переменной не указывается, потому что JavaScriptиспользует"мягкую типизацию", как и PHP.document –это обращение к веб-странице. Функция getElementById()получает тег по идентификатору, указанному внутри кавычек в скобках. Если тег найден, то работать с ним можно через переменнуюtmp:
// Изменяем значение атрибута src - расположение
tmp.src = "img/fon.png";
Через оператор "." (точка)можно обратиться к атрибуту тега и присвоить ему необходимое значение. В данном примере атрибуту srcприсваивается путь к изображению.
Для изменения CSSпосле имени переменной указывается style,затем через оператор "." (точка) указывается нужное свойство. Ниже приведен пример указания CSS-свойствиз кода CSS и из JavaScript.
Из CSS:
#id_menu
{
background-color: red;
width: 300px;
}
Из JavaScript:
// Находим тег по идентификатору id
var tmp = document.getElementById("id_menu");
// Изменяем CSS -ширина
tmp.style.width = "300px";
// Изменяем CSS - цвет фона
tmp.style.backgroundColor = "red";
Обратите внимание, что свойство CSS background-colorв JavaScriptзаписывается слитно: backgroundColor, при этом первая буква второго слова - заглавная!
Далее мы добавим два визуальных эффекта к нашему сайту.
