КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Замечание. Иногда при выводе на экран средствами JavaScript возникают проблемы с кодировкой русского шрифта
|
|
|
|
Иногда при выводе на экран средствами JavaScript возникают проблемы с кодировкой русского шрифта. Чтобы эти проблемы не беспокоили вас, необходимо, чтобы в настройках браузера была выбрана опция автоматического определения кодировки документа.
Листинг 8.3. Вывод в тело документа средствами JavaScript;
<HTML>
<МЕТА content="text/html; charset=windows-1251" http-equiv=Content-Type>
<BODY bgcolor= "#aa88aa" >
<H2> Это вывод средствами HTML <BR>
<SCRIPT>
document.write ("А это работает оператор Write ()");
document.writeln ("</H2> <H3> <FONT color=#fffffff> " +
"<center> Поменяем стиль шрифта </center> </H3> <BR> ");
</SCRIPT>
Вот это да!
</FONT>
<SCRIPT>
document.writeln (" Мы можем даже вставить картинку: <BR>");
document.writeln (" <img src= s37b.jpg> ");</SCRIPT>
</BODY>
</HTML>
Что из этого получается, видно на рис. 8.2.
На основе данного способа вывода в окно браузера можно построить много полезных скриптов. Рассмотрим, например, скрипт, который при загрузке страницы выводит на экран "цитату дня", выбираемую случайным образом.
Рис. 8.2. Вывод на экран средствами JavaScript
Варианты "цитат" будем хранить в специальном массиве. Поскольку для того, чтобы повторы были редки, необходимо достаточно много вариантов "цитат", поэтому объем массива будет достаточно большим, сравнимым с размером типичного HTML-документа. Поэтому объявление массива разместим в отдельном файле скрипта, например, hello.js (листинг 8.4).
Листинг 8.4. Файл hello.js
var ааа = new Array(12);
ааа[0]="0дна голова хорошо, а две — это уже мутация";
ааа[1]="0дна голова хорошо, а с туловищем лучше";
ааа[2]="Ка-52 это душа погибшего Т-72 ";
ааа[3]="Сердце девушки проще открыть ключом от Мерседеса.";
ааа[4]="0тсутствие точки зрения некоторые объясняют широтой взглядов.";
|
|
|
ааа[5]="Для счастья нужны двое, для полного — трое.";
ааа[6]="Гостей встречают по одежке, а провожают — по морде!";
ааа[7]="Все там будем — надпись на машине скорой помощи";
ааа[8]="Keyboard not found. Press Fl to continue ";
aaa[9]="Bce хотят хорошо провести время, но его не проведешь.";
ааа[10]="Мы стоим столько, сколько можем дать";
ааа[11]="Жить в России здорово! Пока не протрезвеешь...";
Авторы большинства из этих цитат, присланных одному из авторов по электронной почте по его просьбе, пожелали остаться неизвестными.
Теперь напишем скрипт, который случайным образом выводит цитату дня на экран (листинг 8.5).
Листинг 8.5. Вывод приветствия на экран
<!---Подключаем файл hello.js --->
<SCRIPT s.rc="hello. js"x/SCRIPT>
<! ---В нужном месте выводим цитату дня --->
<SCRIPT language=javascriptl.l> var i = 0;
i = Math, round (Math, random ()* (aaa. length — lib-document, write ("Цитата дня:... " + aaa[ i ]);
</SCRIPT>
Если цитаты дня заменить на теги вывода изображений, то мы можем получить интересную разновидность фотоальбома. Для тех, кто собирается использовать подобный скрипт как баннерокрутилку, делаем специальное предупреждение.
Подобный метод отображения баннеров во многих баннерных сетях рассматривается как способ обмана и может повлечь применение против вас санкций со стороны администратора сети!
Рассмотрим теперь операторы ввода. JavaScript предоставляет нам несколько способов организации ввода. Первый — использование метода Prompt объекта window. Он имеет следующий синтаксис:
d = window.promt ("Текст сообщения", "Значение_по_умолчанию");
В результате выполнения такой команды на экране появится окно запроса, где пользователю будет выведено приглашение на ввод, содержащееся в выражении "Текст сообщения". После ввода введенное значение присваивается переменной d. Если пользователь не ввел ничего, то d будет присвоено значение выражения "Значение_по_умолчанию". Это значение будет выведено в окне запроса и подсвечено так, что, нажав кнопку ОК, пользователь введет это значение, а, нажав любую другую кнопку, может приступить к вводу своей информации (рис. 8.3). Последнее выражение является необязательным элементом синтаксиса оператора Promt (листинг 8.6).
|
|
|
Листинг 8.6. Ввод при помощи оператора Promt
<HTML>
<МЕТА content="text/html; charset=windows-1251" http-equiv=Content-Type>
<BODY>
<SCRIPT>
var d = "Малая";
c=prompt("Введите слово", "Земля");
s =d+" " +C;
alert (s);
</SCRIPT>
</BODY>
</HTML>
Рис. 8.3. Ввод данных в JavaScript
Ввод значений булевского типа удобнее всего осуществлять при помощи оператора window.confirm, имеющего синтаксис:
b = confirm ("Вопрос");
В результате выполнения такой команды на экране появится окно с заданным вопросом и двумя кнопками (рис. 8.4). В зависимости от нажатия пользователем той или иной кнопки переменная b получит либо значение true (кнопка ОК), либо false (кнопка Cancel, в русифицированной ОС Windows — Отмена).
Рис 8.4. Окно оператора Confirm
Чаще всего оператор Confirm применяется в совокупности с операторами ветвления или цикла, которые мы рассмотрим ниже.
Управление потоком вычислений в JavaScript
В наследство от языка C++ JavaScript достались следующие операторы, реализующие основные алгоритмы управления потоком вычислений (flow control): оператор цикла с конечным числом повторений, оператор цикла while, оператор ветвления. Рассмотрим их синтаксис.
Оператор ветвления реализует выбор той или иной последовательности действий в зависимости от условия (условный оператор):
if (условие) {
Последовательность 1
}
else
{
Последовательность 2
}
Выражение "условие" должно быть булевского типа. Это может быть комбинация операторов отношения или результат действия оператора confirm.
Оператор цикла с конечным числом повторений повторяет определенную последовательность действий заданное число раз.
for ("выражение", "условие", "операция")
{
Последовательность действий.
}
Здесь необходимо использование целочисленной переменной, начальным значением которой будет "выражение". Цикл будет повторяться, пока будет истинным "условие". При этом при каждой итерации цикла над переменной-счетчиком будет выполняться действие "операция". Вот пример вычисления суммы элементов некоторого массива:
|
|
|
3=0
for (i=0; i<5; i++)
{
s+=mas[i];
}
Цикл while исполняет некоторую последовательность действий до тех пор, пока верно некоторое условие. Синтаксис цикла следующий:
while ("условие")
{
Последовательность действий
}
Ввиду того, что проверка условия предшествует выполнению последовательности действий, цикл while получил название цикла с предусловием.
Для принудительного выхода из циклов используется команда break. Для перехода к следующей итерации цикла (досрочного исполнения последовательности действий внутри цикла) используется оператор continue.
В качестве примера, иллюстрирующего применение вышеуказанных операторов, рассмотрим интересный скрипт, реализующий разновидность игры в "Блэк Джэк" (по-русски — "Очко"). Необходимые комментарии даны в листинге 8.7.
Листинг 8.7. Пример использования операторов контроля потока вычислений
<HTML>
<МЕТА content="text/html; charset=windows-1251"
http-equiv=Content-Type><BODY bgcolor=#55ff55>
<center>
<Н2>Добро пожаловать в виртуальное казино </Н2>
<Н1> Корона и Якорь </Н1> </center>
<Script>
alert("Итак, играем в очко!");
// Инициализация переменных
var you=0;
var comp=0;
// Раздаем по 2 карты
for (i=l; i<3; i++)
{
// Значения карт от 2 до 11
you+= 2+ Math.round(Math.random()*10);
comp+=2+ Math.round(Math.random()*10);
}
while ((you<22) &S (window.confirm') "У вас на руках " + you +"\n
Будете брать еще?")})
// Цикл исполняется, пока у игрока < 21 и пока он хочет брать карту
{
// Выдаем еще одну карту
you+=2+ Math.round(Math.random()*10);
}
while (comp < 16)
(
// Теперь играет крупье
comp+=2+ Math.round(Math.random()*10); - }
// Подведение итогов
if (you>21)
// Либо перебрали вы
{
alert("У Вас перебор. "+"\n Вы проиграли:) ");
}
else
{
if (comp>21)
// Либо перебор у казино
{
alert ("Перебор у казино. "+'"\n Ваша взяла:(");. }
else
{
if (comp>you)
// Либо вы проиграли
{
alert("У меня "+ сотр + "\n Победа казино");
}
else
// Либо победили
{
alert(" Вы победили");
}
}
}
</SCRIPT>
</BODY>
|
|
|
</HTML>
Управление окнами просмотра
Средства контроля за отображением страниц в JavaScript дополнены командами, позволяющими управлять как окнами браузера, так и их содержимым.
Команда document. clear очищает текущее окно. Это может пригодиться при выводе данных в тело документа.
Команда window.close закрывает текущее окно браузера (весьма забавно дать пользователю 30 секунд на просмотр страницы, после чего закрыть браузер).
Команда Window.open (ur 1, местоположение, атрибуты) открывает Документ
по адресу uri в окне или фрейме, заданном в выражении "местоположение". Параметры окна описаны в выражении "Атрибуты". Данная команда широко используется для открытия сопутствующих основному окну окон с рекламой.
Команда location.href = "uri" производит переход в текущем окне на новый адрес, указанный в uri. Это весьма полезная и потому часто используемая команда. Свойство location могут иметь объекты window, а также фреймы. Это позволяет осуществлять загрузку документа в нужном окне или фрейме. Рассмотрим пример (листинг 8.8).
Листинг 8.8. Организация перехода
<SCRIPT>
Str = "Для выбора русского языка нажмите ОК \n "+
"Для выбора английского языка нажмите Отмена \n\n "+
"Choose russian language by pressing OK \n "+
"Choose russian language by pressing Cancel ";
if (confitm(str))
{
location.href = "rus.htm"
}
else
{
location.href = "eng.htm"
}
</SCRIPT>
Данный скрипт позволяет пользователям выбирать для просмотра страницу на русском или английском языке (рис. 8.5).
Рис. 8.5. Выбор языка диалога с пользователем
Пользовательские функции
Во всех уважающих себя языках программирования есть возможность оформлять наиболее часто повторяющиеся участки кода в виде специальных пользовательских процедур и функций, вызываемых в нужном месте основной программы. Не стал исключением и JavaScript. Пользовательские функции здесь имеют следующий синтаксис:
function Name ("список аргументов")
{
Последовательность операторов.
}
Для имен функций действуют такие же соглашения, как и для имен переменных. Список аргументов функции может быть пустым (те кто знаком с C++ знают, что такая ситуация встречается довольно часто).
Для возврата результата функции (а функция, как известно, возвращает результат через свое имя, как косинус, например) используется оператор return. При этом происходит прекращение дальнейшего выполнения кода функции, и управление передается оператору, следующему за точкой вызова.
function truncate (a)
{
return a — а % 1;
}
Данная функция отсекает дробную часть числа. Вызывается она таким образом:
...
var a = 7.3;
b = Trunc(a);
alert(b);
...
Пользовательские функции могут располагаться либо в скрипте, который осуществляет их вызов, либо в другом скрипте, включенном в эту же страницу. Зачастую встречается ситуация, когда наиболее часто употребляемые пользовательские функции располагаются в отдельном файле скрипта, который подключается к нужным страницам.
Применение функций весьма широко и многообразно. Пользовательские функции могут назначаться в качестве событий к различным объектам, например кнопкам.
В листинге 8.9 приведен пример "скрипта — убийцы", который закрывает текущее окно при нажатии кнопки.
Листинг 8.9. Пользовательская функция
<HTML>
<HEAD>
</HEAD>
<BODY color= "#000000" >
<SCRIPT>
function kill()
{
window.close ();
}
</SCRIPT>
<center><Hl> Нажмите кнопку для закрытия окна </Н1>
<input type=button name = Ы value = "Нажмите" onClick=kill()>
</BODY>
</HTML>
Возможно назначение пользовательской процедуры в качестве события при нажатии на гиперссылку. Это позволяет выполнить некоторые подготовительные действия перед открытием гиперссылки:
<а href=javascript:userfuncl()Хитрая ссылка </а>
Данный трюк обычно применяется для одновременного открытия документов в нескольких фреймах. Пусть у нас имеется трехфреймовое окно. В одном фрейме расположено меню, а в двух других отображаются попарно документы, соответствующие ссылкам того или иного пункта меню. Организовать открытие двух документов при нажатии на одну ссылку стандартными средствами невозможно. В этом случае на выручку приходит пользовательская функция:
<SCRIPT>
function perehod_a ()
(
framel.location.href="doc_al.htm"
frame2.location.href="doc_a2.htm"
}
</SCRIPT>
<a href=javascript:perehod_a ()> Справка по изделию A </a>
Весьма часто пользовательские функции используются при работе с формами.
Формы и JavaScript
Формы являются неотъемлемой частью дизайна многих страниц. При всех своих несомненных достоинствах, они, как инструмент ввода, имеют также и ряд недостатков. Представим, что на странице имеется анкета, которую заполняет пользователь. Некоторые поля могут оказаться обязательными к заполнению, в другие поля свободного ввода должна быть введена информация из определенного, но достаточно широкого, чтобы использовать объекты select, диапазона. Как видно, остро стоит вопрос проверки корректности ввода. В HTML нет стандартных средств контроля за содержимым форм, но зато они есть в JavaScript.
Каждый объект document имеет свойство document.forms, которое является массивом объектов типа form. Доступ к свойствам той или иной формы можно получить либо из этого массива (document.forms[0] — первая форма документа), либо непосредственно по имени формы, которое задано в описании (document. forma_l — обращение К форме С именем forma_l).
Каждая форма HTML-документа также представляет собой объект. Основные свойства, методы и события этого объекта приведены в табл. 8.1.
Таблица 8.1. Свойства, методы и события объекта form
| Свойство | Описание |
| Elements [ ] | Содержит массив элементов, используемых в форме |
| action | Устанавливает действие, которое нужно произвести при передаче данных формы на сервер |
| target | Содержит имя окна, в котором должен отобразиться результат заполнения формы |
| encoding | Содержит способ кодирования данных формы. Соответствует атрибуту ENCTYPE элемента FORM |
| method | Определяет способ передачи данных формы на сервер |
| Метод | Описание |
| submit () | Отправляет форму на сервер |
| Событие | Описание |
| onSubmit | Генерируется при передаче формы |
Элементы ввода в форме также являются объектами. Информация о них хранится в массиве elements [] объекта форм. В то же время, возможно получать доступ к свойствам полей непосредственно при помощи указания их имен (forma_l.edit_l — обращение к полюedit_l формы forma_l).
Рассмотрим также основные свойства объекта element, приведенные в табл. 8.2.
Таблица 8.2. Свойства, методы и события объекта element
| Свойство | Описание |
| checked | Содержит состояние элемента |
| defaultChecked | Содержит состояние элемента по умолчанию |
| defaultValue | Содержит значение элемента по умолчанию |
| form | Содержит объект формы, в которой находится элемент |
| length | Содержит количество элементов в списке |
| name | Содержит имя элемента |
| options | Хранит собственно элементы списка |
| selectedlndex | Определяет номер выбранного по умолчанию элемента списка |
| value | Задает значение элемента |
| Метод | Описание |
| blur() | Снимает фокус ввода |
| click () | Имитирует щелчок мышью на элементе |
| focus () | Устанавливает на элементе фокус ввода |
| select () | Делает элемент списка выбранным |
| Событие | Описание |
| onBlur | Генерируется при потере элементом фокуса ввода |
| onChange | Генерируется при изменении элемента |
| onClick | Генерируется при щелчке мышью на элементе |
| onFocus | Генерируется при получении элементом фокуса ввода |
| onSelect | Генерируется при выборе содержимого элемента |
Обладая подобной информацией, мы можем заняться написанием скриптов обработки форм.
Сначала рассмотрим скрипт, который реализует эффектный способ навигации при помощи элемента ввода select (листинг 8.10). В HTML-документе объявляем форму из одного элемента select. Событию onChange этого элемента присваиваем пользовательскую функцию, которая осуществляет переход на запрашиваемую пользователем страницу.
Листинг 8.10. Навигация при помощи элемента select
<HTML>
<МЕТА content="text/html; charset=windows-1251" http-equiv=Content-Type>
<BODY bgcolor= "#ffffff" >
<FORM. name="formal">
<НЗ>Выберите ссылку для перехода </НЗ>
<SELECT NAME="selectl" OnChange="perehod(})" size="l">
<option SELECTED>Главная</option>
<option>Личная информация/орtion>
<option>Kapтa caйтa</option>
<option>Поисковая система</option>
</SELECT>
</FORM>
<SCRIPT>
function perehod()
{
var linx= new Array(3);
linx[0] = "index.htm";
linx[l] = "personal.htm";
linx[2] = "map.htm";
linx[3] = "poisk.htm";
index = document.formal.selectl.selectedlndex;
location.href=linx[index]; }
</SCRIPT>
</BODY>
</HTML>
Результат отображения такого документа приведен на рис 8.6.
Теперь рассмотрим скрипт, который проверяет правильность ввода в поля формы. Пусть у нас есть некоторая анкета, в которую надо ввести фамилию, возраст, мастерство и e-mail пользователя. Поле ввода фамилии должно быть непустым. Возраст должен лежать в пределах от 10 до 50 лет. Корректность ввода e-mail будем определять по двум очевидным критериям: наличию в содержимом поля ввода знака @, а также наличию точки. Скрипт, организующий проверку правильности ввода в такую форму, приведен в листинге 8.11.
Рис. 8.6. Навигация при помощи формы
Листинг 8.11. Проверка правильности ввода
<HTML>
<МЕТА content="text/html; charset=windows-1251"http-equiv=Content-Type> <BODY bgcolor= "tffffff" >
<FORM name="fprma2" onSubmit=usercheck()>
<H3> Анкета пользователя. Часть 1. </H3>
<Н4>Ф.И.О: <INPUT TYPE='TEXT' NAME='user' size=32 > <BR> Возраст: <INPUT TYPE='TEXT" NAME='age' size=8 > <BR> Мастерство: <SELECT NAME="skill" size="l">
<OPTION SELECTED>Ламер</ OPTION >
< OPTION >Юзер</ OPTION >
< OPTION >Хакер</ OPTION >
< OPTION >Элитный хакер</ OPTION >
</SELECT> <BR>
e-mail: <INPUT TYPE='TEXT' NAME='email1 size=32 > <BR> </H4>
< INPUT type=submit value="Дальше">
< INPUT type=reset value="Отправить">
</FORM>
<SCRIPT>
function usercheck()
{
// em — e-mail пользователя.
em = document.fоrma2.email.value;
// 1-е условие —. непустое поле Ф.И.О
ul=(document.fоrma2.user.value!= "");
// 2-е условие — возраст от 10 до 50 лет
u2=((document.forma2.age.value > 10)&(document.forma2.age.value < 50));
// 3-е условие — наличие в email @ и точки
u3=((em.indexOf ("@")!=-!)'& (em.indexOf (".")!=-!));
if ((ul)s(u2)&(u3))
// Если все три условия выполняются, то отправим форму.
{
document.forma2.submit;
}
else
// Иначе выведем сообщение об ошибке
{
alert("Ошибка! \n Проверьте правильность ввода!")
}
}
</SCRIPT>
</BODY>
</HTML>
Метод string. indexOf ("подстрока") объекта string выдает позицию подстроки в строке string. Если подстрока не входит в строку, то выдается значение — 1.
На этом мы завершаем наше знакомство с JavaScript.
ГЛАВА 9
|
|
|
|
|
Дата добавления: 2014-12-29; Просмотров: 542; Нарушение авторских прав?; Мы поможем в написании вашей работы!