Самоучитель по JavaScript

Концепция


Мы обсудили объекты и методы. Теперь приступим к событиям (events). Сначала разрешите мне кое-что пояснить (или запутать). События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код, а не существуют самостоятельно, как те скрипты, которые мы с вами разбирали. Они входят в структуру документа НТМL, не требуя команд <SCRIPT> и </SCRIPT>. Сами они не скрипты, а скорее область взаимодействия между вашей страницей и читателем.

События — это то, что происходит. Они добавят динамики вашему сайту. Увидев их, посетители скажут: «Ух ты!», а сочинять длинные скрипты совсем не нужно.

Среди разнообразных обработчиков событий для начала мы выберем один, самый популярный, — onMouseOver (навести мышь).


Cейчас вы уже представляете себе, что такое некоторые события и команды, которые ими управляют. Давайте рассмотрим, как действуют другие. Все они работают по одной схеме. Так что если вам не чужда логика, вы легко сможете поместить их на свои страницы.




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

Между прочим, научившись добавлять события к HTML, мы возвращаемся к полным скриптам, поэтому нам снова понадобится стандартный формат от <SCRIPT LANGUAGE="javascript"> дo </SCRIPT>. Вот что мы собираемся сделать: мы спросим у пользователя, как его зовут, и присвоим этому имени переменную. Как только переменная будет присвоена, мы сможем ввести ее в строку document.write, которая напечатает это имя на странице.

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




Иерархия объектов JavaScript играет настолько важную роль, что мы посвятим ей отдельный урок, но мы уже и так начинаем понемногу ее осваивать.



Нам известно, что существуют объекты, например, document, и методы, например, write, которые воздействуют на объекты. В мы имели дело с переменными. Теперь рассмотрим концепцию свойств. Мы уже слегка касались этой темы. Свойства представляют собой часть или качество объекта. В мы работали со свойством документа bgColor.

Было бы трудно рассмотреть все возможные свойства на одной странице. У меня три книжки по JavaScript, и в них я насчитал 56 различных свойств, определяющих многочисленные объекты. Поэтому сейчас я расскажу вам о нескольких наиболее популярных и о том, какую пользу они приносят.




Уфф! Сделаем паузу и посмотрим, что мы уже знаем. В JavaScript есть объекты, похожие на существительные или предметы. У объектов есть свойства, которые описывают их, как прилагательные описывают существительные. Мы пользуемся схемой oбъект.свойство.

Еще у объектов есть методы, или действия, которые можно к ним применить. После метода ставятся скобки по схеме oбъект.мeтoд(). У разных объектов разные свойства и методы.

А теперь мы узнаем самый большой секрет JavaScript, иерархию объектов. Как только вы ее поймете, cчитайте, что JavaScript у вас в кармане!




Cоздавая переменную, вы присваиваете имя результату команды или события JavaScript. Создавая функцию, вы делаете почти то же самое, только имя присваивается целой серии команд. Множество команд JavaScript вы комбинируете в одну.




Это два последних обработчика событий, которые вы должны иметь в своем арсенале: onMouseOut и onUnload (обратите внимание на заглавные буквы). Я свел их в одном уроке, потому что обе они начинают действовать после того, как вы что-то сделали. onMouseOver вызывает некое событие, если навести мышь, к примеру, на ссылку. В противоположность ей onMouseOut начинает действовать, если курсор увести со ссылки. Вы также знаете, что команда onLoad запускает скрипт, когда страница загружается. Команда onUnload действует, когда пользователь уходит со страницы.




Это первый из двух уроков, посвященных открытию новых окон. Сначала вы узнаете, как через команды Javascript открыть новый документ HTML в другом окне. Второй урок научит вас, как с помощью функции поместить две разные страницы в одном документе.

Начнем с основ.




В мы открывали окно с помощью команды window.open. Окно заполнялось другим документом HTML, который мы указывали в скобках.

Сейчас мы попробуем создать функцию, которая откроет новое окно, причем и новое окно, и все его содержимое будет вписано в тот же документ HTML. То есть в буквальном смысле слова мы вложим две страницы в одну.




Команда confirm (подтвердить) действует очень похоже на alert, за исключением того, что добавляет кнопку «Отмена» в диалоговое окно. И то, и другое — методы.

Одна команда сама по себе многого не дает. Нет никакой разницы, что вы выбираете — «ОК» или «ОТМЕНА». Но стоит добавить функции IF (если) и ELSE (иначе), и готовы отличные эффекты.




Cегодня мы не только узнаем, как производить вычисления с помощью JavaScript, но и проверим, хорошо ли у вас с арифметикой. Если вам уже приходилось заниматься программированием, то это вам знакомо. Если нет, не паникуйте. Все очень просто!




Вспомним обработчики событий onMouseOver и onMouseOut. Мы уже делали нечто похожее — с помощью этих команд появлялся текст в строке состояния. Это было в .

Еще раз обратите внимание, что не требуются тэги <SCRIPT> и </SCRIPT>. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>.




Вот вам еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию.

В общем, когда вам нужна только одна команда JavaScript, можно включить ее целиком в <A HREF>. Для многократного повторения больше подходит функция.




Цель этого урока — познакомить вас с использованием JavaScript в формах. Сегодняшний скрипт через форму позволяет выбрать цвет фона.

Формы всегда начинаются командой <FORM> и заканчиваются командой </FORM>. Здесь ничего нового, простой HTML.




Сегодня мы продолжим начатое в Уроке 17. Будем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo.




Продолжим разговор о взаимодействии форм и JavaScript.

Обычно JavaScript в соединении с формами используется для проверки ввода данных. У нас еще будет разговор на эту тему. Два следующих урока подготовят вас к нему.




Сегодня вы познакомитесь со случайным выбором чисел. Генерируя случайные числа, JavaScript пользуется датой и временем.




Сегодня вы познакомитесь с командой IF (если), которая дает возможность выбора.

За IF следует условие и указание, что делать, если оно верно. Верным может быть одно условие или несколько. Скрипт знает, где начинаются и кончаются верные условия, потому что они заключены в {фигурные скобки}.




Сегодня у нас в меню случайное число, две функции и знакомство с командой Else на закуску.

If/Else (если/иначе) дают вам дополнительный контроль над программой, позволяя принимать решения на оба случая: и когда условие выполнено, и когда не выполнено.




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




Все языки программирования имеют дело с циклами (loop). В JavaScript бывают циклы двух видов: While и For.

В двух словах, циклы For используются, когда известно количество повторений. Циклы While — когда вы не знаете точно, сколько раз нужно повторять команду. В сегодняшнем примере мы рассмотрим цикл For.




Сейчас вы увидите, что такое циклы While. Помните, я говорил, что циклы For используются, когда вы знаете, сколько раз нужно их повторять, а циклы While — когда не знаете. Первый же пример нарушает правило! Это нужно для того, чтобы показать вам, как пользоваться переменными, чтобы сосчитать повторения цикла и помочь вам подготовиться к заданию.



Содержание раздела