Теперь в моём журнале появился и JavaScript. Статьи будут большими и двигаться мы будем очень быстро, потому что уже в этом номере мы сталкивались с JavaScript припрограммировании ASP сервера. В этом разделе мы будем изучать интересные приёмы программирования Web страниц. Я постараюсь показать наиболее интересные приёмы.
JavaScript - это не та Java, которую мы изучаем в другом разделе. Просто Java - это язык программирования, это виртуальная машина, а это скрипт. Скрипт - это текст на каком-нибудь языке, который не компилируется, а используется так, как мама родила. А мама, т. е. Программист рожает скрипты в текстовом виде. Наш скрипт используется практически везде. Его применение неограниченно. Но всё же популярность он получил благодаря использованию его в сети Internet вместе с HTTP. Он позволяет улучшить любую страничку и превратить её в прекрасное деяние.
Для запуска JavaScript нам понадобится браузер (я думаю это знают все). Сейчас все браузеры поддерживают этот язык, поэтому волноваться тут не о чем. JavaScript вставляется прямо в текст HTML, да ты наверно уже это знаешь. Так что давай перейдём к практике.
Давай рассмотрим сразу простенький пример:
<HTML>
<BODY>
<CENTER>Первый пример использования JavaScript
<BR>
<SCRIPT language="JavaScript">
document.write("Привет из JavaScript!!!");
</SCRIPT>
</CENTER>
</BODY>
</HTML>
Здесь ты можешь увидеть этот пример в действии, хотя там не на что смотреть, ничего особого не происходит.
Основная часть примера - это HTML. Сам JavaScript (в дальнейшем просто JS) это три строчки:
<SCRIPT language="JavaScript">
document.write("Привет из JavaScript!!!");
</SCRIPT>
Но всё это мелочи и я затеял уроки JS не для того, чтобы научить тебя таким примитивным вещам, скоро мы будем писать действительно необходимые в инете скрипты. А для этого нам надо познакомится с событиями. Что наша жизнь без них? Только события позволяют написать реальную прогу.
Что я понимаю под событиями в JS? Это реакция на какие-нибудь действия пользователя. Например, по щелчку мышки в определённой области мы можем выводить какое-нибудь окно. В этом случае мы обрабатываем сообщение "On Click". Срезу держи пример:
<Form>
<Input type="Button" value="Надави на меня"
onClick="alert('Лучше нажал бы себе на пупок:)')">
</Form>
Нажми на эту кнопку и ты увидишь результат:
Теперь разберём здесь всё происходящее. Здесь мы создаём новую форму <Form> для наглядности. Внутри формы мы создаём кнопку <Input type="Button" . Задаём заголовок кнопки с помощью value="Надави на меня" . И наконец указываем событие onClick="" . Внутри кавычек мы пишем непосредственно JS код. Команда alert выводит диалоговое окно с сообщением на экран. Текст сообщения указывается в скобках в качестве единственного параметра для команды alert.
Сразу небольшое отступление. Почему я в одном месте для JS использую одинарные кавычки, а в другом двойные. Очень просто. В конструкции document.write("Привет из JavaScript!!!") можно использовать любые кавычки. А вот команда alert в моём примере уже заключена в двойные кавычки, поэтому внутри команды я использую одинарные, чтобы браузер мог определить где, и какие кавычки используются. Расмотрим сразу пример. Нам нужно вывести на экран текст: Нажми кнопку "Yes" чтобы получить результат 1. Внутри текста используются двойные кавычки, поэтому нам нужно заключить весь текст в одинарные:
<SCRIPT language="JavaScript">
document.write('Нажми кнопку "Yes" чтобы получить результат 1');
</SCRIPT>
Если внутри текста используются одинарные кавычки, то заключать весь текст желательно в двойные.
<SCRIPT language="JavaScript">
document.write("Нажми кнопку 'Yes' чтобы получить результат 1");
</SCRIPT>
Если в тексте нет кавычек, то не имеет значение, какие использовать для оформления текста.
Ещё одно замечание: здесь мы использовали JavaScript прямо внутри HTML текста onClick="alert('Лучше нажал бы себе на пупок:)')" без использования специального тега <SCRIPT>. Такое тоже возможно и это удобно, когда нам надо выполнить только одну операцию. Но когда их несколько, то удобнее использовать <SCRIPT> тег.
JavaScript, как и просто Java или другой язык высокого уровня поддерживает функции. Мы их будем использовать практически всегда, поэтому желательно будет изучить их прямо сегодня.
Функция оформляется как
<SCRIPT language="JavaScript">
function MyFunc(){
Текст функции
}
А это вызов функции:
MyFunc();
</SCRIPT>
В этом примере я определил свою функцию MyFunc и могу спокойно её использовать. Всё что находится между скобками { и } считается операторами функции и выполняются при её вызове. Если ты работал с языком С++ или Java, то наверно уже нашёл сходство и оно действительно есть.
Теперь перепишем пример с вызовом диалогового окна при нажатии кнопки:
<SCRIPT language="JavaScript">
function MyFunc(){
alert('Лучше нажал бы себе на пупок');
}
</SCRIPT>
<Form>
<Input type="Button" value="Надави на меня"
onClick="MyFunc()">
</Form>
И сразу доказательство того, что он работает так же:
На этот раз мы вынесли JavaScript код в отдельную функцию заключённую тегами <SCRIPT> и </SCRIPT>.
Основное, с чем нам придётся работать в JavaScript - это будут формы и их объекты. Сейчас мы должны определиться, как к ним можно обращаться и работать с ними.
Для JavaScript все объекты выглядят как иерархическая структура. Каждый элемент на странице - это объект и с ним можно работать с помощью JavaScript, изменяя его свойства. К каждому объекту можно получить доступ двумя способами, и я раскажу тебе самый простой.
Допустим у нас есть всё та же форма и два поля для ввода информации о имени и о e-mail:
Вся работа с объектами в JavaScript делится на три части: работа с окнами (window - здесь хранится инфа о всём окне), документом (document - содержимое окна, т.е. HTML страница с которой мы сегодня и работаем) и расположением (location - место расположения). С окном и документом мы будем знакомится постепенно, потому что их за пять минут не объяснишь, а вот location мы разберём за пять сек.
В параметре location находится адрес загруженной в браузер страницы. Но читать это значение не очень интересно, а изменять, чтобы загрузить в окно новый документ, это уже резон.
Вот пример, который по нажатию кнопки может загрузить в окно новую страницу:
