BTC
ETH
BNB
SOL
USDC
XRP
DOGE
TON
ADA
SHIBЯзык JavaScript был создан фимой Netscape, и, несмотря на сходство названия, он практически не имеет ничего общего с детищем компании Sun — языком Java. Java была взята за основу при разработке JavaScript, но конечный продукт мало чем походил на родителя. Для получения статуса «язык программирования» JavaScript не хватает реализации таких мелочей, как наследование, инкапсуляция и полиморфизм. Не стоит в ужасе перелистывать страницу — этих кошмаров здесь нет! JavaScript — это тесно интегрированный c HTML язык управления сценариями отображения HTML-документа. Он обладает очень широкими возможностями, и, на наш взгляд, именно из-за этого снискал такую нехорошую славу. Но для изучения он достаточно легок — именно из-за отсутствия излишних наворотов. Для полноценного понимания данного языка необходимо изучить учебник JavaScript, а сегодня мы просто разберем основы.
Перейдем ближе к делу. Сейчас на примерах мы расскажем об основных принципах использования JavaScript. Благодаря уже упомянутой интеграции с HTML есть возможность вставлять команды прямо внутри тэгов:
<body onload=’alert(«Yo, man!»)’>
Итак: внутри тэга <body> вставлен обработчик события onload, реализующий вызов события сразу после загрузки страницы. В данном случае он вызывает функцию Alert. Посмотрите на скрипт в действии, просто вставив его в HTML-файл. А о событиях мы упомянем чуть ниже.
Но стандартно все же используют тэги <script> и </script>, записывая сценарий между ними. Эти парные тэги могут быть вставлены в любом месте HTML-документа, но внутри этих тэгов нельзя использовать стандартные HTML-тэги, за исключением комментариев. В таком случае вызов необходимого действия (функции) происходит похожим образом:
<body onload=’function (myfunction)’>
Где myfunction — название ранее описанной функции. Подробнее о функциях в JavaScript.
Почти всегда функции представляют собой способ связки нескольких команд. Синтаксис функций следующий:
function myFunc(параметры) {тело функции} вызов функции.
Вызов функции может повторяться неограниченное количество раз (даже внутри самой себя) и происходить прямо в теле документа и выглядеть (в данном случае) просто как myFunc() или при обработке заданного события (как в рассмотренном первом скрипте — body onload — при загрузке страницы). Все функции сначала загружаются в память, а потом обрабатываются, поэтому нет необходимости ломать голову над порядком распределения функций.
ОБРАБОТЧИКИ
Плавно переходим к обработчикам. События являются элементами, привносящими интерактивность, и инициируются действиями пользователя. В момент наведения курсора на ссылку инициируется событие MouseOver, а в момент нажатия — Click и тут же MouseDown. Заставить скрипт реагировать на события можно при помощи обработчиков этих самых событий. Чаще всего название обработчика формируется так: on+название события. Например onClick, onMouseOver. Простейший пример:
<form><input type=»button» value=»Click here» onClick=»alert(‘Yo, man’)»></form>
Здесь был использован стандартный компонент формы — кнопка с обработчиком события. Попробуйте поэкспериментировать с обработчиками событий (onMouseOver, onMouseDown, onMouseOut). Небольшое пояснение я приведу относительно синтаксиса в последнем скрипте: мы использовали два различных типа кавычек, чтобы ограничить имя функции и простого текста. Если бы использовались одинаковые кавычки, то интерпретатор (обработчик скрипта) не смог бы разобраться, какая часть относится к событию, а какая нет. Если необходимо использовать только одни кавычки, то их форма не играет роли.
ПЕРЕМЕННЫЕ
В следующем примере за исключением функций и обработки событий мы коснемся типичной для всех языков программирования темы — переменных. Переменные можно сначала описать (объявить), а потом применять либо сразу применять, не утруждая себя их описанием. Объявление переменной выглядит следующим образом: var name, где var — от слова variable — зарезервированное слово для обозначения переменной, а name — имя переменной. Негласным правилом считается присваивание разным переменным разных имен — меньше будет ошибок. Подробнее о JavaScript типах данных. Итак…
<script language=»JavaScript»>
function sum() {
var a =2;
var b =3;
var itogo =a+b;
alert(itogo); }
</script><form><input type=»button» value=»OK» onclick=’sum()’></form>
Пошагово: объявляется функция sum() — здесь пустые скобки, потому что у функции нет дополнительных параметров, но скобки обязательны. Потом идет блок описания переменных; а присваивается значение 2, а переменной b, соответственно, 3. Затем следующая переменная itogo (именем переменной может быть любое сочетание букв и цифр) описывается как математическое действие a+b, и броузер помещает в эту переменную результат вычислений. И в заключение функции идет вызов выпадающего окна alert. Чтобы скрипт заработал, надо включить функцию, вызвать ее. И вызов привязан к событию onClick. При нажатии на кнопку Sum выводится результат вычислений, хранимый в переменной itogo.
В Photoshop и прочих продуктах от Adobe, заточенных под веб, есть замечательная возможность генерирования HTML-кода. Это может быть полезно при создании ролловеров (навигационных панелей), но для кнопок числом до десятка можно и не генерировать многокилобайтный код, а обойтись следующим:
<A HREF=»where.htm»
onMouseOver=»document.manual.src=’button_ov.jpg’; return true»
onMouseDown=»document.manual.src=’button_dn.jpg’; return true»
onMouseOut=»document.manual.src=’button.jpg’; return true»>
<IMG SRC=»button.jpg» NAME=»where» BORDER=0></A>
Вначале идет указание на целевой документ (where.htm), затем вопреки порядку строк (мы уже говорили, что браузер сначала читает весь документ, а потом работает с ним) загружается картинка button.jpg, ей присваивается имя where, ну и не стоит забывать указать отсутствие рамочки (border=0). Теперь обрабатывается интерактивная часть: при наведении на изображение кнопки (button.jpg) происходит событие MouseOver и включается соответствующий обработчик, загружающий картинку button_ov.jpg. При нажатии на кнопку срабатывает onMouseDown, загружающий следующую картинку button_dn.jpg. И в конце концов указывается возврат в исходное состояние, когда курсор покидает границы изображения (onMouseOut).
