ArtStyle Group KOLOBOK.Ru MODA.Ru RusRock.Ru FamilyWeb StarChat.Ru
Мода
Сегодня в разделе:
Многообразие кожаных изделий верхней одежды предлагают нам производители и законодатели моды. Особенно популярны плащи и куртки из блестящей кожи...

Спорт
Сегодня в разделе:
У России первое золото на Олимпиаде
Елена Бережная и Антон Сихарулидзе подарили России первое золото Солт-Лейк-Сити. Наши фигуристы, лидировавшие после короткой программы, удержали первое место...

подпишись на новости!
отмена подписки на новости
Зайди в чат!
Имя

Детский
благотворительный фонд
"Кто, если не Я"
.

Помоги детям!








Web-мастеру

Ожившая Мечта

Автор: Свирепчук Дмитрий
Место публикации: Мой Компьютер (http://www.mycomp.com.ua)
Номер: #11 (2001)

Открывается занавес.

В центре сцены за компьютером сидит Читатель.

ЧИТАТЕЛЬ: Что-то у меня не получается сайт сделать. Какой-то он плоский, скучный.

За кулисами раздаются шаги.

ЧИТАТЕЛЬ: Кто это идет?

На сцену выходит другой человек - Автор.

АВТОР: Здравствуйте! Вот, заглянуть решил.

ЧИТАТЕЛЬ: О! Давай что-то расскажи.

АВТОР: Например, что?

ЧИТАТЕЛЬ: Даже не знаю… А, придумал: я тут свой сайт сваять пытаюсь, но чего-то в нем не хватает…

АВТОР: Интерактивности и динамичности?

ЧИТАТЕЛЬ: Точно! Подскажи, как поправить дело, PLS!

АВТОР: Хорошо, слушайте внимательно, если будут вопросы - задавайте, не стесняйтесь…

…Итак, у вас в душе зародилось желание создать свой собственный web-дом.

Как правило, все начинается с того, что человек обвороженный дизайном сайтов садится за компьютер и начинает творить свои страницы в Front Page Express'e, или, что вообще ни куда не годится, в WinWord'e!

ЧИТАТЕЛЬ: Я так и делал! А что тут плохого?

АВТОР: По-настоящему хорошо можно сделать только при помощи текстового редактора. А "Ворд", это редактор WYSIWYG (What you see is what you get - что ты видишь, то и получишь). В нем вы просто вставляете таблицы, графику, ссылки, формы, а после завершения программа сама генерирует HTML-код. Естественно машина никогда не была столь грамотна, как человек, и не может сделать все рационально, с наименьшими затратами. Надеюсь, вы знаете, что каждый лишний килобайт страницы увеличивает время загрузки на несколько лет!

ЧИТАТЕЛЬ: Это ужасно! Ни разу не видел, чтобы страница грузилась так долго!

АВТОР: "Шутка". Но правило "В каждой шутке есть доля шутки" применяется и к компьютеру.

ЧИТАТЕЛЬ: Какой, у вас, у компьютерщиков плоский юмор…

АВТОР: Не важно. Моя цель не шуточки шутить, а рассказать вам, как внести в страницу элемент динамичности. Вы сможете сделать так, что бы ваша страница изменялась от времени года, суток или от каких либо действий посетителя. Поможет вам в этом DHTML!

ЧИТАТЕЛЬ: И что это значит?

АВТОР: Dynamic Hyper Text Markup Language - динамический язык разметки гипертекста.

Естественно, для изучения этого материала, вам необходимы знания обычного HTML. Если вы его не знаете, не расстраивайтесь, есть множество книг посвященных этому делу: посмотрите, изучите.

Все web-страницы - обычные текстовые документы...

ЧИТАТЕЛЬ: Ой, ну конечно! Я точно знаю, что в обычный текст нельзя вставить графику, красиво все оформить, сделать бегущие строки! Не надо "пудрить" мне мозги!

АВТОР: А я и не "пудрю". Да, на первый взгляд в это трудно поверить, но это именно так. Странички подготавливаются при помощи языка HTML. Но я буду уделять HTML наименьшее количество времени, так как вы должны были его изучить. Мы будем вести беседу о DHTML.

ЧИТАТЕЛЬ: А что это за зверь, и с чем его едят?

АВТОР: Что бы объяснить, что такое этот DHTML, я приведу вам несколько примеров. Обращали ли вы когда-нибудь, внимание на то, что иногда при наведении на ссылку, в строке состояния браузера появляется не адрес, на который указывает ссылка, а осмысленный текст. Или, когда документ состоит из фрэймов (это когда окно разбивается на две или более частей и в каждое окошко загружается отдельный документ), при щелчке на ссылке содержимое меняется в нескольких фрэймах. Или, когда динамически создаются окна браузера. Все это и есть DHTML.

ЧИТАТЕЛЬ: Это как бы язык программирования?

АВТОР: Нет, это не язык, это общее название. Сейчас поясню. Написать программу на DHTML можно при помощи VBScript и JavaScript.

ЧИТАТЕЛЬ: А как называется эта программа? Собственно программа, или сценарий?

АВТОР: Лэрри Уолл (создатель языка Perl) говорил по этому поводу следующее: "Сценарий, это то, что раздают артистам, а программу продают зрителям". Поэтому мы будем называть свои компьютерные программы скриптами. Обратите так же внимание на названия и содержание языков: VBScript - осваивается без проблем теми, кто имеет представление о VB (Visual Basic). Это фактически его расширение для интернета. А вот JavaScript, хоть и похож по названию на Java, но не имеет с ним ничего общего! Я буду рассказывать только о JavaScript.

ЧИТАТЕЛЬ: Что же нужно для того, что бы создавать динамические странички?

АВТОР: Вам потребуется лишь "джентльменский набор" из текстового редактора и браузера (желательно иметь несколько браузеров от разных производителей, что бы знать, где и как поведет себя ваш скрипт). И еще, НЕ пользуйтесь текстовыми процессорами, такими, как WinWord: они вставляют в файл множество символов редактирования, не понятных для браузера!

Теперь перейдем собственно к практике: Создадим свой первый скрипт.

Итак, откройте свой любимый текстовый редактор и запишите в него следующий код:

<html>
<head>
<title>Мой первый скрипт на Java Script</title>
</head>
<body>
Здесь обычный документ HTML<br>
<script Language="JavaScript">
document.write ("А это уже JavaScript<br>")
</script>
А здесь снова идет HTML
</body>
</html>

После этого проверьте, правильно ли вы все написали и сохраните файл под именем (к примеру) first_JavaScript.html. Отлично. Теперь откройте этот документ в браузере. Я пользуюсь Internet Explorer 5.5, и все примеры работают (так же все работает и в IE 5.0), если у вас установлен Netscape Navigator версии 5.х у вас тоже не должно быть проблем. После загрузки, в том случае если все выполнено правильно, вы увидите три строчки текста:

Здесь обычный документ HTML

А это уже JavaScript

А здесь снова HTML

Заголовок окна будет таким: "Мой первый скрипт на Java Script".

ЧИТАТЕЛЬ: Не, я не понял: на кой черт мне нужно, что бы этот текст у меня на каждой странице появлялся?

АВТОР: Вам достаточно изменить соответствующие строки в исходном коде и тогда текст поменяется и в браузере.

ЧИТАТЕЛЬ: Да, это я, конечно, протормозил!

АВТОР: После того, как вы ознакомились с азами HTML, вы должны понять большую часть всего вышеизложенного.

ЧИТАТЕЛЬ: Да, в обычном HTML я уже свободно ориентируюсь, но мне не понятно, что это за теги <script> и </script>.

АВТОР: Объясняю. Между этими тэгами как раз и размещается тело вашего скрипта. Параметр language (язык) указывает на то, на каком языке написан скрипт. Кроме JavaScript этот параметр может иметь значение VBScript, если вы пишите скрипт на VB. Теперь разберемся с текстом, расположенным между открывающим и закрывающим тегами script.

Строка document.write ("А это уже JavaScript") это стандартная функция вывода текста в документ, а как вы уже должны знать это тег, который указывает на то, что последующий текст начинается с новой строки.

ЧИТАТЕЛЬ: А зачем там это слово "document"? Нельзя ли просто написать write?

АВТОР: Слово document показывает браузеру, на то, что вывод текста ведется именно в загруженный документ. С такой формой записи мы будем сталкиваться еще неоднократно.

Рассмотренный нами пример не имеет практического применения, так как такого же результата (с меньшими затратами) можно добиться, используя простой HTML. Теперь мы начнем создавать более полезные скрипты, которым можно найти практическое применение. Давайте теперь поговорим о такой важной теме, как события.

ЧИТАТЕЛЬ: Ну, давай поговорим.

АВТОР: В JavaScript понятие событие означает действие, как правило, связанное с мышью. К примеру, щелчок правой кнопки мыши, перемещение мыши.

ЧИТАТЕЛЬ: И какие они бывают?

АВТОР: Далее приведен список, в котором перечислены события, используемые наиболее часто.

OnMouseOver - наведение мыши на какую-либо область странички. Применяется, например, для вывода в строку состояния браузера пояснения о том, куда ведет ссылка, или что делает кнопка. Так же может использоваться, если нужно устроить так, что бы при наведении курсора на картинку, она менялась на другую.

OnMouseOut - вывод мыши за пределы какой либо области страницы. Можно использовать, как в последнем примере, только наоборот - при выходе курсора за пределы картинки она меняется на изначальную. Зная эти два события можно сделать достаточно интересный эффект на вашей страничке. Подготовьте два рисунка: один из них должен быть анимацией. Сделайте так, что бы первый кадр анимации совпадал с простой картинкой. Теперь вы можете создать следующий эффект: при наведении курсора мыши на картинку она "оживает", или наоборот.

OnClick - нажатие левой кнопки мыши. С помощью этого события можно запускать функцию (об этом ниже) или выводить окна с сообщениями (о том, как это делается, поговорим позже).

OnDblClick - двойной щелчок мыши. Применяется точно так же как и при одинарном щелчке. Это событие не стоит применять к кнопкам, так как пользователь может не понять, что нужно клацнуть два раза. Кнопки ведь срабатывают от одинарного щелчка!

Теперь вы знаете свои возможности.

ЧИТАТЕЛЬ: Примерно представляю. Только почему их так мало?

АВТОР: В этом списке приведены далеко не все события. Но, на первых порах, вам хватит и этого.

ЧИТАТЕЛЬ: Ну, хорошо. А как они работают, эти события?

АВТОР: Вызываются они, как параметры тегов. Посмотрим на следующий пример.

<html>
<head>
<title>Страница c JavaScript </title>
</head>
<body>
<form name="myform">
<input type="button" name="mybutton" value="Нажми меня" OnClick="alert('Вы нажали на кнопку')">
</form>
</body>
</html>

Вот тебе сразу и возможность протестировать скрипт:

Загрузив этот документ в браузер, вы увидите одну единственную кнопку с надписью "Нажми меня". Как видите, появился новый элемент формы - button. Это просто кнопка, которая создается средствами HTML. По умолчанию она ничего не делает, она специально предназначена для обработки скриптом. Послушавшись совета кнопки и нажав ее, создастся окно, на котором будет написано "Вы нажали на кнопку". Для того, что бы закрыть окно, щелкните "ОК". Это окно генерируется функцией alert(). Как видите, в теге <input> мы указали параметр onClick. Узнали? Это и есть то самое событие. Заменив onClick на, скажем, onMouseOver можно получить тот же эффект, только табличка будет появляться сразу после наведения курсора мыши на эту кнопку.

ЧИТАТЕЛЬ: А почему же тут нет тега <script>?

АВТОР: В этом примере его просто не надо использовать!

ЧИТАТЕЛЬ: А эта штука применяется только к кнопкам?

АВТОР: Нет, конечно! Вы можете применять эти события не только к кнопке, но и к любому другому элементу страницы. Достаточно указать его имя в параметрах страницы.

События в JavaScript играют наибольшую роль. И когда вы полностью освоите их, у вас в руках будет мощный инструмент для создания интерактивных страниц. С их помощью можно полностью управлять оформлением документа и состоянием форм.

ЧИТАТЕЛЬ: Ладно, это я вроде бы усвоил. Что дальше?

АВТОР: Функции. Тоже очень полезная вещь.

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

Функция имеет следующий формат:

function имя_функции(параметры) {
Первый оператор

Имя функции желательно давать осмысленное, что бы в следующем году вы могли догадаться, что вы такое умное творили. Так же слово function следует всегда писать с МАЛЕНЬКОЙ буквы (и вообще, этот JavaScript такой чувствительный к регистру L!)

ЧИТАТЕЛЬ: Это все конечно хорошо, но для чего мне нужны эти функции? Ты ведь говорил, что в них огромная польза Я пока ничего полезного не вижу.

АВТОР: Предположим, вы хотите, чтобы при нажатии на кнопку выполнялось несколько команд, а не одна, как было описано в последнем примере. В этом случае не обойтись простым присваиванием событию. Для этого вы пишите скрипт (используя тег <script>), который содержит функцию, помещаете в тело функции все операторы, которые вам нужно выполнить. Для того, чтобы выполнить эту функцию (соответственно, и все операторы, помещенные в ней), нужно только указать ее имя в формате имя (параметры). Естественно можно присвоить запуск этой функции событию.

ЧИТАТЕЛЬ: А если у меня есть длинный фрагмент текста, который мне нужно писать в разных частях страницы. Можно это упростить? Ты же говорил, что эти функции можно запускать сколько угодно раз.

АВТОР: Так и есть! К примеру, вам нужно писать слово "ацетилсалициловая кислота" (для справки - аспирин). Вы просто должны записать следующую функцию:

function aspirin() {
document.write("ацетилсалициловая кислота")
}

ЧИТАТЕЛЬ: И как теперь вызвать функцию? Написать это супер-слово?

АВТОР: Для того, чтобы можно было "написать это супер-слово" достаточно в нужном месте скрипта (именно скрипта, а не документа!) поместить строку aspirin().

Теперь вам все понятно в функциях?

ЧИТАТЕЛЬ: Да.

АВТОР: Тогда поедем дальше и поговорим о том, как JavaScript "видит" документ HTML.

Эта тема является трудной для понимания, но вы ее усвоите. С точки зрения JavaScript окно браузера это объект window, в который загружен документ document. Свойства всего, что помещается в документ, могут быть изменены при помощи конструкции document.имя_объекта.атрибуты=новое_значение. Как вы заметили, все элементы разделяются при помощи символа "." (точка).

ЧИТАТЕЛЬ: Значит, я могу написать window.document.write?

АВТОР: В принципе, это правильно и не внесет ошибок в ваш скрипт, но так делать не стоит. Такая конструкция применяется в тех случаях, когда важно, в какой документ вести запись (например, при создании окон или при использовании фрэймов). Имя объекта определяется при помощи параметра name практически в любом теге документа.

ЧИТАТЕЛЬ: А есть ли другой способ обратится к элементу страницы?

АВТОР: Еще один способ есть. Воспользуйтесь конструкцией document.тип_объекта[порядковый_номер_объекта].свойство.

ЧИТАТЕЛЬ: И who есть who в этой штуке?

АВТОР: Тип объекта, это может быть, к примеру, слово forms, что означает форму, или images, если вы обращаетесь к рисункам. Свойство порядковый_номер_объекта означает, как ни странно, порядковый номер объекта на вашей страничке. Если у вас есть на странице рисунок можно указать название файла не при помощи параметра src в теге <img>, а при помощи того же параметра в строке

document.images[0].src="Путь_к_файлу".

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

ЧИТАТЕЛЬ: Ладно, это хорошо. Давай теперь сделаем что-то полезное, чему можно найти достойное применение.

АВТОР: ОК. Создадим, например, скрипт который позволит пользователю менять фоновый цвет страницы. Подойдет?

ЧИТАТЕЛЬ: ОК

АВТОР: Вот исходный код этого скрипта:

<html>
<head>
<title>Страница c JavaScript </title>
</head>
<body>
<form name="form1">
Нажмите одну из кнопок для того, что бы изменить цвет странички.
<input type="button" value="черный" onClick="document.bgColor='black'">
<input type="button" value="зеленый" onClick="document.bgColor='green'">
<input type="button" value="розовый" onClick="document.bgColor='#E43FBF'">
</form>
</body>
</html>

И снова вам представляется возможность протестировать скрипт:

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

ЧИТАТЕЛЬ: А что это за цифры в третьей кнопке?

АВТОР: Это шестнадцатеричный код цвета. Здесь E4 - насыщенность красного цвета, 3F - насыщенность зеленого, и BF - синего. Такая форма записи может создавать практически любой цвет или оттенок! Обратите так же внимание на то, что слово bgColor нужно писать именно так, УЧИТЫВАЯ РЕГИСТР. Понравилось?

ЧИТАТЕЛЬ: Не совсем… А что если читателю моей страницы не понравится набор цветов? Можно ли, чтобы посетитель сам задал цвет страницы?

АВТОР: Ответ однозначный - конечно же, можно! Для этого мы поместим на вашу страницу текстовое поле, в которое читатель будет вносить значение цвета. Либо тот же шестнадцатеричный код, либо слово на английском, как было сделано для первых двух кнопок в предыдущем примере. Так же нам понадобится кнопка, с помощь которой будет изменяться фоновый цвет. Я не буду снова приводить весь документ, а лишь покажу, как выглядит теперь тело формы.

<form name="form1">
Введите шестнадцатеричное значение цвета или его название на английском: <input type="text" value="" name="bgc">
<input type="button" value="Изменить цвет на заданный" onClick="document.bgColor=document.form1.bgc.value">
</form>

Тестируйте.

Введите шестнадцатеричное значение цвета или его название на английском:

Но так красивее: Здесь мы воспользовались конструкцией document.form1.bgСolor.value для получения доступа к тексту, содержащемуся в текстовом поле.

ЧИТАТЕЛЬ: Теперь я удовлетворен! Это интересно, но я устал. Давай сделаем перерыв, сходим в буфет, дадим зрителям отдохнуть. Только перед тем, как уйдешь, расскажи, что будет в следующем действии.

АВТОР: Я планирую обсудить процесс динамического создания окон, работу с графикой, вывод в строку состояния.

Закрывается занавес.

Антракт.

Прислал(а): Димыч



на главнуюна главную страницу наверх наверх

#131714#131714


© 2001-2011, ArtStyle Group
E-mail: team@kolobok.ru
ArtStyle Group   Развлекательно-информационный портал