Отправляет email-рассылки с помощью сервиса Sendsay

Изучим JavaScript общими усилиями

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Дизайн сайта - инструмент Бизнеса" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Doubrovski

Статистика

397 подписчиков
0 за неделю
←   Все выпуски   →

Изучим JavaScript общими усилиями


Изучим JavaScript общими усилиями
Рассылка продублирована на сайте www.infotok.net.ru
Адрес для связи griisaev@yandex.ru

ВЫПУСК

Всем здравия желаю!

С зтого выпуска вводится новая рубрика «ПРИМЕРЫ». В ней будут размещаться примеры с подробным описанием. Кто хочет разместить в данной рубрике интересный скрипт, готовьте подробное его описание.

С 1990 года стали развиваться языки объектно-ориентированного программирования (ООП). JavaScript так же поддерживает ООП.
Объектами являются окно браузера, изображение, кнопка и т.п. Каждый объект имеет свои свойства и методы (функции). Объект является как бы контейнером для свойств и методов. В JavaScript можно создавать из одного объекта другой, при этом новый объект, сохраняет (наследует) свойства родительского объекта. Данная возможность облегчает задачу программиста.
Когда посетитель веб-страницы совершает, какое-то действие по отношению к элементу страницы, происходит событие. Например, он щелкает по объекту кнопка или изображению – происходит событие onclik.
В прошлых выпусках рассылки мы использовали события onclik и onload.
О события мы поговорим в следующих выпусках.
Поговорим об объектах.
Объекты характеризуются свойствами, методами и событиями, которые могут к ним применяться. Синтаксис применения свойств и методов:

объект.свойство
объект.метод()

Как уже говорилось, объекты могут быть вложенными друг в друга.
Объект содержащий другой называется родительским. Вложенный называется дочерним.
Для доступа к свойствам и методам вложенного объекта следует писать следующим образом:

объект1. объект2. … объект n.свойство
объект1. объект2. … объект n.метод()

Пример.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример</title>
<script language="javascript">
window.document.write("привет") 
</script>
</head>

<body>
</body>
</html>

Здесь родительский объект window содержит дочерний объект document, который с помощью метода write() выводит строку "привет".
Таким образом из вложенных друг в друга объектов создается объектная модель документа (далее ОМД).   
Объектные модели браузеров различны, что заставляет программиста составлять сценарий программы для каждого браузера.
В данной рассылке мы будем придерживаться объектной модели браузера InternetExplorer. Во вложенном файле вы найдете рисунок объектной модели InternetExplorer. Распечатайте ее и держите всегда перед глазами, когда пишите свою программу.

Если Вы посмотрите на рисунок ОМД, то увидите, что кроме объектов в ней есть так называемые коллекции. Коллекция это как бы промежуточный объект содержащий массив объектов HTML документа. Например коллекция links содержит все ссылки документа, коллекция forms содержит все объекты формы. Но, помимо коллекций содержащих объекты определенной тематики, есть коллекция содержащая все объекты коллекций (HTML документа) это коллекция all.

 
ПРИМЕРЫ

Этот пример взят из книги Вадима Дунаева.

Смена изображений

<html>
<head>
<title>Смена изображения</title>
</head>
<body>
<img ID="myimg" src="images/img1.jpg"
onclick = "document.all.myimg.src = 'images/img2.jpg'">
</body>
</html>

В приведенном примере одно изображение заменяется другим. Элемент <img> HNML-документа указывает на то, что в этом месте будет загружено изображение. Атрибут src данного элемента указывает, где находится файл изображения (адрес файла).
Согласно модели ООП элемент <img> является объектом, а атрибут src его свойством.
Событие onclick (щелчок по изображению) вызывает сценарий, который изменяет свойство src и происходит смена изображения img1 на img2.
Рассмотрим строку сценария:
onclick = "document.all.myimg.src = 'img2.gif'"
Событие onclick – щелчок по изображению.
Поскольку смена изображения происходит в нутрии документа объект window можно не писать, а сразу указывать объект document, затем коллекция all, ID объекта <img> и его свойство src.
В этом примере смена изображения происходит один раз и сколько бы Вы, потом не щелкали, предыдущее изображение не вернется.
Для того чтобы вернуть первоначальное изображение следует добавить в сценарий переменную-тригер (еще ее называют флаг). Триггер принимает одно из двух значений.

<html>
<head>
<title>Смена изображения</title>
</head>
<body>
<img ID="myimg" src="images/img1.jpg"
onclick='imgchange()'>
<script language="javascript" type="text/javascript">
var flag=false
function imgchange()
{
if (flag) {
document.all.myimg.src="images/img1.jpg"
} else {
document.all.myimg.src="images/img2.jpg"
}
flag=!flag
}
</script>
</body>
</html>

Здесь событие onclick вызывает функцию imgchange(). Сам скрипт содержит следующее.
Объявляется переменная flag. Далее следует код функции imgchange(), где используется оператор условного перехода if…else. И в конце скрипта значение триггера изменяется на !flag (не flag).
В этом примере мы работаем с изображениями и вместо коллекции all можем использовать коллекцию images. А в место идентификатора объекта можем использовать индекс.

<script language="javascript" type="text/javascript">
var flag=false
function imgchange()
{
if (flag) {
document.images[0].src="images/img1.jpg"
} else {
document.images[0].src="images/img2.jpg"
}
flag=!flag
}

</script>

До следующего выпуска!

ВАШИ ВОПРОСЫ

Здесь будут размещаться Ваши вопросы. Поскольку я сам чайник в JavaScript, то будем сообща искать на них ответы. Обязательно познакомьтесь с правилами подачи вопросов и ответом.

Правила подачи вопросов и ответов.
Общие

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

Правила подачи вопросов

Правильно и понятно формулируйте ваши вопросы. Указывайте ваш рабочий адрес электронной почты. Старайтесь не забегать вперед рассылки. Указывайте тему письма как «Вопрос».

Правила для ответов

При ответе в теме письма указывайте Ответ - (номер вопроса). Если хотите ответить на несколько вопросов, то на каждый вопрос отвечайте отдельным письмом.

Адрес для связи griisaev@yandex.ru

До следующего выпуска!

Все права защищены © Исаев Григорий 2007г., griisaev@yandex.ru
При цитировании ссылка на источник обязательна.

В избранное