Категории каталога

Мои статьи [13]
Статьи для программеров [10]
В помощь программисту))
Мануалы [0]
Описания к программам
Биографии DJ [0]
Диджеинг [0]

Форма входа

Приветствую Вас Гость!

Поиск

Наш опрос

Оцените мой сайт

Всего ответов: 106

Статистика

Главная » Статьи » Статьи для программеров

JavaScript. Введение

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:

<Form name="MyForm">
<Input type="text" name="Text1">
<Input type="text" name="Text2">
</Form>

Чтобы получть доступ к строке ввода Text1 нужно использовать конструкцию:

document.Имя Формы.Имя Объекта.Параметр

То есть если мы хотим изменить текст в объекте Text1 нам нужно написать document.MyForm.Text1.value. И сразу пример:

<Form name="MyForm">
<P><Input type="text" name="Text1">
<P><Input type="text" name="Text2">
<P><Input type="Button" value="Надави на меня"
onClick="document.MyForm.Text1.value='Привет!!!'">
</Form>

В примере снова используется встроенный в HTML JavaScript и обрати внимание на кавычки.

Рабочий пример ты увидешь здесь

Вся работа с объектами в JavaScript делится на три части: работа с окнами (window - здесь хранится инфа о всём окне), документом (document - содержимое окна, т.е. HTML страница с которой мы сегодня и работаем) и расположением (location - место расположения). С окном и документом мы будем знакомится постепенно, потому что их за пять минут не объяснишь, а вот location мы разберём за пять сек.

В параметре location находится адрес загруженной в браузер страницы. Но читать это значение не очень интересно, а изменять, чтобы загрузить в окно новый документ, это уже резон.

Вот пример, который по нажатию кнопки может загрузить в окно новую страницу:

<Form name="MyForm">
<Input type="Button" value="VR-online"
onClick="location.href='http://www.cydsoft.com/vr-online';">
</Form>

А вот и рабочая кнопка, по нажатию которой ты улетишь на http://www.cydsoft.com/vr-online, то есть на мою заглавную страницу:

Категория: Статьи для программеров | Добавил: clubdance (2008-01-25) | Автор: vlad
Просмотров: 534 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]