Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Приемы программирования на JavaScript

↑

⇐ ПредыдущаяСтр 9 из 10Следующая ⇒

Проще всего начать изучение программирования на каком-либо языке с простых примеров, которые читатель может немедленно проверить. С подачи авторов языка С все современные книги по программированию начинаются с примера печати фразы "Hello world" в разных ее проявлениях ("Hello Java", "Hello Perl" и т.п.). Для JavaScript точного аналога такого подхода найти нельзя. Но мы попробуем проиллюстрировать на простых примерах основные приемы программирования.

Аналогом "Hello world" можно считать выдачу сообщения в отдельном окне, которое порождается при нажатии на гипертекстовую ссылку:

Пример 2.9. Программа выдачи простого предупреждения при выборе гипертекстовой ссылки. Схема URL - JavaScript

<HTML>
<HEAD>
<title>Самый первый пример JavaScript</title>
</HEAD>
<BODY>
<center>
<h1>Мой первый пример JavaScript</h1>
<hr>
</center>
В текст этогодокумента внедрена гипертекстовая ссылка
<a href="javascript:window.alert('Do you speak English?')">
"Don`t click here" </a>.
Любопытно, что будет, если все-таки выбрать? </BODY>
</HTML>

В данном примере среди текста документа расположена гипертекстовая ссылка "Don`t click here". Если ее выбрать при просмотре (кликнуть мышкой), то на экране появится окно-предупреждение с вопросом: "Do you speak English?".

Генерация этого окна осуществляется специальным методом window.alert, который выполняется при выборе гипертекстовой ссылки. Если быть более точным, то в качестве URL информационного ресурса, который следует загрузить при переходе по данной гипертекстовой ссылке, используется схема JavaScript - расширение спецификации URI для программирования сценариев просмотра гипертекстовых документов World Wide Web. В этом случае выполнение JavaScript-программы происходит при выборе гипертекстовой ссылки, а сам код программы записан как URL.

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

Пример 2.10. Программа выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки

<HTML>
<HEAD>
<title>Самый первый пример JavaScript</title>
</HEAD>
<BODY>
<center> <h1>Мой первый пример JavaScript</h1>
<hr>
</center>
В текст этого документа внедрена гипертекстовая ссылка
<a href="javascript:void(0)" onClick="window.alert('Do you speak English?')">
"Don`t click here"</a>.
Любопытно, что будет,если все-таки выбрать?
</BODY>
</HTML>

Обойтись без новой схемы URL здесь также не удается, но она используется только для того, чтобы после выбора гипертекстовой ссылки в рабочем поле программы навигатора не появлялось пустой страницы, или не приходилось загружать вновь старую страницу. Для обработки события используется конструкция onClick, которая реализует обращение к обработчику (handler) данного события, который в свою очередь вызывает выполнение кода, записанного вслед за onClick.

Размещение кода программы на JavaScript непосредственно в тагах HTML является обычным делом, но не всегда бывает удобным. Наиболее часто JavaScript-код выносят в специальный HTML-контейнер SCRIPT(</script>.....</script>). Для того, чтобы продемонстрировать применение этого подхода, видоизменим наш пример следующим образом:

Пример 2.11. Применение контейнера SCRIPT для размещение JavaScript-кода

<HTML>
<HEAD>
<title>Самый первый пример JavaScript</title>
<script language="JavaScript">
</script>
</HEAD>
<BODY> <center>
<h1>Мой первый пример JavaScript</h1>
<hr>
</center>
В текст этого документа внедрена гипертекстовая ссылка
<a href="javascript:void(0)" onClick="question()">"Don`t click here"</a>.
Любопытно, что будет, если все-таки выбрать? </BODY>
</HTML>

Данный пример развивает применение JavaScript-кода для обработки события Click. Но только в этом случае мы не размещаем весь код обработки события в атрибуте onClick. В данный атрибут помещается только вызов функции, которая будет обрабатывать это событие. Само тело функции размещено в заголовке HTML-документа внутри тагов <script...> и </script>

Для того, чтобы защитить текст функции от интерпретации браузерами, которые не поддерживают JavaScript, мы поместили код в HTML-комментарий. При этом последняя строка этого комментария должна начинаться как комментарий JavaScript, чтобы браузер, понимающий JavaScript, не интерпретировал ее как часть JavaScript-кода.

Различные браузеры поддерживают разные версии JavaScript, что накладывает определенные ограничения при написании сценариев JavaScript. Для того, чтобы максимально адаптировать свою программу к конкретному типу программного обеспечения, часто включают проверку версии и имени программы-браузера в JavaScript.

Пример 2.12. Получение типа программы просмотра HTML-страниц

<HTML>
<HEAD>
<title>Test of Browser name</title>
</HEAD>
<BODY>
<h1 align=center>Проверка имени типа браузера;</h1>
<hr> Для того, чтобы получить имя вашей программы просмотра выберите кнопку "Browser"<br>
<center>
<form name=kuku>
<input type=button name=browser value=Browser
onClick="window.alert(window.navigator.appName)">
</form>
</BODY>
</HTML>

Данная программа в точности повторяет пример 2.10, но в окне предупреждения выдает имя программы просмотра HTML-страниц (window.navigator.appName). Вообще говоря, в простом сообщении о типе программного обеспечения большого смысла нет, но если вставить проверку данного имени в текст HTML-страницы и реализовать условную компиляцию страницы, то тогда обращение к данной конструкции JavaScript будет оправданным:

Пример 2.13. Условная генерация текста страницы по типу программы просмотра

<HTML>
<HEAD>
<title>Test of Browser name</title>
</HEAD>
<BODY>
<h1 align=center>Проверка имени типа браузера</h1>
<hr> <script language=JavaScript>

</script>
</BODY>
</HTML>

В данном примере текст JаvaScript-программы размещен непосредственно в теле документа. При его загрузке, когда HTML-интерпретатор доходит до контейнера SCRIPT, вызывается JavaScript-интерпретатор. В этот момент будет проверяться условие, которое содержится в операторе if. В зависимости от результата проверки этого условия остальной текст страницы примет тот или иной вид в зависимости от типа программы просмотра. При просмотре данного документа программой отличной от Netscape Navigator будет выдано еще и окно предупреждения.

Вообще говоря, проверить тип программы просмотра можно на сервере протокола HTTP и передать программе просмотра уже готовую страницу без условной генерации ее содержания. Но это возможно только в том случае, когда автор страницы имеет возможность программировать на машине где установлен сервер и имеет возможность администрировать этот сервер. В ряде случаев, когда место под Website арендуется и в договоре аренды нет пункта, обеспечивающего управление ресурсами сервера, в этом случае программы с условной генерацией содержания страниц бывают чрезвычайно полезными. Другой случай - это работа в локальном режиме без сервера. Здесь JavaScript является единственным средством управления просмотром. Существует еще ряд случаев, когда применение контейнера SCRIPT в теле документа является вполне оправданным, но на них мы остановимся позже в контексте решения конкретных задач управления сценариями просмотра.

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

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

Вернемся теперь снова к примеру 2.13, но только разместим теперь код JavaScript не в тексте документа, а в отдельном файле:

Пример 2.14. Размещение скрипта в отдельном файле (netscape.jsc)

<HTML>
<HEAD>
<title>Test of Browser name</title>
</HEAD>
<BODY>
<h1align=center>Проверка имени типа браузера</h1>
<hr>
<script language=JavaScript src=netscape.jsc>
</script>
</BODY>
</HTML>

В данном случае текст условной генерации страницы размещен во внешнем файле. При загрузке страницы этот текст докачивается программой просмотра и исполняется так же, как если бы он размещался в документе. Любопытно, что при просмотре текста документа через опцию "View Source" текст скрипта не отображается, что дает возможность скрыть его содержание от пользователя. В самом файле, который содержит конструкции JavaScript, HTML-таги не используются:

Пример 2.15. Содержание файла netscape.jsc, ссылка на который установлена в атрибуте SCR тага <SCRIPT > из примера 6

if(window.navigator.appName == "Netscape")

{ document.write("<br><center><font color=steelblue size=+5>");
document.write("У вас хороший навигатор.");
document.write("</font></center>"); }
else
{
document.write("<font color=red size=+3>Необходим Netscape Navigator
версии 3.0 и выше.</font>");
window.alert("Down load new version of your browser now.");}

На этом можно закончить вступительную часть, посвященную примерам JavaScript-кода, и перейти к более планомерному изложению приемов программирования на JavaScript, если бы не одно "но". Дело в том, что любой автор, который собирается излагать программирование на JavaScript, встречается с проблемой постепенного наращивания сложности примеров. Материал надо начинать излагать "от печки", но вот этой самой печки нет. Все программы на JavaScript (Client-site JavaScript) - это в той или иной мере программы обработки событий, которые связаны с теми или иными информационными объектами. Без изучения этих объектов нельзя начинать ничего программировать.

Однако, существует лазейка в этом заколдованном круге, которой мы и воспользуемся. Это схема JavaScript универсального локатора ресурсов (URL). В наших примерах мы уже использовали эту схему. Она помогала нам открывать окно-передупреждение при выборе гипертекстовой ссылки (пример 2.10) и избегать перезагрузки страниц (пример 2.11). Мы будем пользоваться этой схемой вызова JavaScript-кода до тех пор, пока не появится в нашем рассмотрении объект (контейнер HTML) с атрибутом обработки события.

После этого небольшого отступления начнем рассматривать приемы программирования на JavaScript в соответствии с иерархией объектов этого языка, начиная с самого старшего объекта и двигаясь вглубь дерева объектов: от объекта "окно" к элементам формы.

Примеры манипулирования окнами

Как это не покажется странным, но в наших простых примерах мы уже начали манипулировать окнами. Открытие окна-пердупреждения - это операция над объектом "окно". Определим свойства объекта "окно", методы изменения этих свойств и события, которые могут быть связаны с объектом типа "окно". При этом мы не ставим перед собой задачи описания всех известных в JavaScript свойств, методов и событий, связанных с объектами этого класса. Определим только те, которые понадобятся в наших примерах.

Методы

Методы позволяют нам создать на экране видимое окно, закрыть окно и проделать с ним другие операции. С методом window.alert мы уже знакомы. Методы window.confirm и window.prompt используются для получения ответов от пользователя:

Пример 2.16. Использование методов Alert, Prompt, Confirm

<HTML>
<HEAD>
<title>Window simple example</title>
</HEAD>
<BODY>
<center>
<h1>Simple window methods</h1>
<hr>
</center>
<ul>
<li><a href="javascript:window.alert('Attention!!! press the button to continue.')">
Метод Alert.</a>
<li><a href="javascript:window.status=window.confirm('Answer yes or no.');void(0);">
Метод Confirm.</a>
<li><a href="javascript:window.status=window.prompt('Type string here:','');void(0);">
Метод Prompt.</a>
</ul>
</BODY>
</HTML>

В данном примере при вызове метода confirm появляется окно с просьбой подтверждения некоторого действия, при использовании метода prompt - окно с приглашением ввести информацию в поле ввода. В двух последних случаях если не указать функции void(0), произойдет замещение текста HTML-документа на значение, которое возвращают эти два метода. Если внимательно смотреть за полем окна навигатора, в котором отображается информация о загрузке документов, то там можно будет увидеть возвращаемые значения, т.к. они присваиваются свойству status текущего окна, которое связано именно с этим полем, и которому можно присваивать значения, и, следовательно, эти значения будут отображаться в этом поле.

Однако, следует признать, что рассмотренные выше методы используются крайне редко. А тем более в приведенном здесь контексте, поэтому поспешим рассмотреть методы открытия и закрытия окна.

Открыть окно можно используя метод open:

Пример 2.17. Метод window.open

<HTML>
<HEAD>
<title>Window simple example</title>
</HEAD>
<BODY>
<center>
<h1>Open window methods</h1>
<hr>
</center>
Если выбрать гипертекстовую ссылку
<a href="JAVASCRIPT:WINDOW.OPEN('SIMPLE8.HTM','example','scrollbars,
resizable,width=300,height=200');void(0);">Открыть окно</a>, то
будет открыто новое окно. Чаще всего этот прием используют
при создании контекстно зависимых меню.
</BODY>
</HTML>

В данном случае при выборе гипертекстовой ссылки будет открыто окно шириной 300 пикселей и высотой 200 пикселей, в окне не будет никаких стандартных меню навигатора, и в окно будет загружен документ SIMPLE8.HTMl. Метод open позволяет также определить области прокрутки, наличие или отсутствие стандартных меню навигатора и возможность изменения размеров окна. Последняя возможность зависит от платформы на которой исполняется скрипт.

Документ SIMPLE8.HTM в свою очередь содержит код, который позволяет закрыть окно, открытое в примере 2.17:

Пример 2.18. Закрыть текущее окно

<HTML>
<HEAD>
<title>Window simple example</title>
</HEAD>
<BODY>
<center>
<h1>Close window methods</h1>
<hr>
</center>
Если выбрать гипертекстовую ссылку
<a href="javascript:window.close();void(0);"> Закрыть окно</a>,
то данное окно будет закрыто.
</BODY>
</HTML>

В данном примере в качестве гипертекстовой ссылки используется ссылка на метод widow.close(), который закрывает текущее окно. На применении методов open и close построен принцип построения help. По методу open открывается окно подсказки. В него загружают текст документа-подсказки с заранее заготовленной ссылкой на закрытие окна. При выборе этой ссылки окно подсказки закрывается, и пользователь продолжает работать с основным окном навигатора.

Рассмотрим еще один метод, связанный с окном - метод scroll. Данный метод позволяет организовать прокрутку текста в окне.

Пример 2.19. Прокрутка текста в окне навигатора

<HTML>
<HEAD>
<title>Scroll text</title>
</HEAD>
<BODY>
<center>
<h1>Прокрутка текста в окне навигатора</h1>
<hr>
[<a href="javascript:for(i=0;i<80;i++)
{window.scroll(0,i*10)};void(0);">Прокрутить текст</a>]
<hr>
</center>
Вообще говоря, проверить тип программы просмотраможно на сервере протокола HTTP
и передать программе просмотра уже готовую страницу без условной генерации ее...
<hr>
<center>[<a href=#top>Вернуться в начало</a>]</center>
</BODY>
</HTML>

От метода прокрутки мы перейдем теперь к методу, который позволит нам прокручивать документ более равномерно - это метод setTimeout. Большинству пользователей Web он знаком по бегущим строкам в поле статуса программы-навигатора. Метод setTimeout позволяет отложить выполнение функции, которая указывается в качестве аргумента на определенное количество миллисекунд. Системы прокрутки в этом случае рекурсивно вызывают свое выполнение через этот метод и тем самым порождают бесконечный цикл прокрутки.

Пример 2.20. Прокрутка текста по таймеру

<HTML>
<HEAD>
<title>Scroll text</title>
<script language=JavaScript>
<!--
i=0;flag=0;start_stop=0;
function my_scroll()
{ if(start_stop==1)

{ window.scroll(0,i*10);
if(flag==0)i++;
if(flag==1) i--;
if(i>80) {i=80;flag=1;}
if(i<0) {i=0;flag=0;}}
setTimeout("my_scroll()",500);}

В данном примере мы не стали писать текст программ в самих гипертекстовых ссылках и вынесли его в заголовок документа. В данном случае это облегчает чтение текста и отладку программы. Текст прокручивается через каждые 500 миллисекунд, что делает прокрутку более плавной. В примере мы впервые применили событие onLoad. Это событие запускает процесс выполнения нашей функции. Прокрутка текста осуществляется в двух направлениях: сначала снизу вверх, а по достижении конца документа сверху вниз.

Следует подробно остановиться на особенностях исполнения метода setTimeout. Особенно в части запуска и останова процедуры прокрутки. Рассматривать алгоритм ее исполнения лучше всего в контексте многопоточных или многозадачных систем. Функция my_scroll - это отдельный процесс (поток), который исполняется программой-навигатором. В момент, когда интерпретатор навигатора встречает метод setTimeout, он создает новый процесс (поток), эквивалентный функции my_scroll, и откладывает его исполнение на 500 миллисекунд. После этого он продолжает выполнять текущий процесс (поток). В нашем случае вызов метода setTimeout - это последняя команда функции my_scroll, поэтому после нее ничего не выполняется, а сам процесс или поток, связанный с текущей функцией my_scroll после обработки setTimeout уничтожается. Однако, новый процесс (поток) уже создан в памяти и ждет начала своего исполнения.

В нашем примере новый процесс поток порождается всякий раз, как интерпретатор достигает метода setTimeout, а уничтожается, когда интерпретатор доходит до последнего оператора этого потока. Такой алгоритм выполнения заставляет расположить вызов setTimeout за пределами блока проверки условий скроллинга. Если мы расположим его внутри, то при останове скроллинга новый процесс не будет порожден, а это значит, что и кода, который будет реагировать на флаг скроллинга после останова, не будет существовать, т.е. запустить скроллинг не будет никакой возможности. Именно по этой причине функция my_scroll начинает исполняться сразу после загрузки документа по событию onLoad, но т.к. флаг скроллинга 0, то прокрутки текста не происходит. Процесс порождается все время, пока страница загружена в текущее окно навигатора.

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

⇐ Предыдущая 1 2 3 4 5 6 7 8910 Следующая ⇒

Познавательные статьи:

Техника нижней прямой подачи мяча

Комплекс физических упражнений для развития мышц плечевого пояса

Стандарт Порядок надевания противочумного костюма

Общеразвивающие упражнения без предметов

Последнее изменение этой страницы: 2016-08-01; просмотров: 154; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 13.58.161.115 (0.009 с.)