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:
В примере снова используется встроенный в HTML JavaScript и обрати внимание на кавычки.
Рабочий пример ты увидешь здесь
Вся работа с объектами в JavaScript делится на три части: работа с окнами (window - здесь хранится инфа о всём окне), документом (document - содержимое окна, т.е. HTML страница с которой мы сегодня и работаем) и расположением (location - место расположения). С окном и документом мы будем знакомится постепенно, потому что их за пять минут не объяснишь, а вот location мы разберём за пять сек.
В параметре location находится адрес загруженной в браузер страницы. Но читать это значение не очень интересно, а изменять, чтобы загрузить в окно новый документ, это уже резон.
Вот пример, который по нажатию кнопки может загрузить в окно новую страницу: