Методы focus() и blur()

Метод focus() применяется для передачи фокуса в окно, с которым он использовался. Передача фокуса полезна как при открытии окна, так и при его закрытии, не говоря уже о случаях, когда нужно выбирать окна. Рассмотрим пример.

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

<HTML>

<HEAD>

<SCRIPT>

function myfocus(a)

{

myWin = window.open('','example','width=300,height=200');

// открываем окно и заводим переменную с указателем на него.

// Если окно с именем 'example' существует, то новое окно не создается,

// а открывается поток для записи в имеющееся окно с именем 'example'

if(a==1)

{

myWin.document.open(); //открываем поток ввода в уже созданное окно

myWin.document.write('<H1>Открыли окно в первый раз'); //Пишем в этот поток

}

if(a==2)

{

myWin.document.open();

myWin.document.write('<H1>Открыли окно во второй раз');

}

if(a==3)

{

myWin.focus(); // передаем фокус, а затем выполняем те же действия,

// что и в предыдущем случае

myWin.document.open();

myWin.document.write('<H1>Открыли окно в третий раз');

}

myWin.document.write('</H1>');

myWin.document.close();

}

</SCRIPT>

</HEAD>

<BODY>

<a href="javascript:myfocus(1);">Откроем окно и напишем в него что-то</a>,

<BR><BR>

<a href="javascript:myfocus(2);">напишем в него же что-то другое, но фокус не передадим</a>,

<BR><BR>

<a href="javascript:myfocus(3);">опять что-то напишем в него, но сперва передав ему фокус</a>.

</BODY>

</HTML>

Передача фокуса в новое окно. Чтобы увести фокус из определенного окна myWin, необходимо применить метод myWin.blur(). Например, чтобы увести фокус с текущего окна, где выполняется скрипт, нужно вызвать window.blur(). Эффект будет тот же, как если бы пользователь сам свернул окно нажатием кнопки в правом верхнем углу окна.

<html> <head>

<title>JavaScript в примерах</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">

function display() {

window.onerror=null;

document.form.navigator.value = navigator.appName;

document.form.version.value = navigator.appVersion;

document.form.codename.value = navigator.appCodeName;

document.form.useragent.value = navigator.userAgent;

document.form.platform.value = navigator.platform;

if (navigator.javaEnabled() < 1) document.form.java.value="No";

if (navigator.javaEnabled() == 1) document.form.java.value="Yes";

}

</script>

</head>

<body onclick="display()">

<form name=form>

<table border=1 width="600">

<tr>

<td>

Браузер:</td>

<td ><input type=text size=20 maxlength=20 name="navigator"></td>

</tr>

<tr>

<td>

Версия:</td>

<td ><input type=text size=20 maxlength=20 name="version"></td>

</tr>

<tr>

<td>

Кодовое имя</td>

<td ><input type=text size=15 maxlength=15 name="codename"></td>

</tr>

<tr>

<td>

Платформа:</td>

<td ><input type=text size=15 maxlength=15 name="platform"></td>

</tr>

<tr>

<td>

Включена ли Java:</td>

<td><input type=text size=3 maxlength=3 name="java"></td>

</tr>

<tr>

<td>

UserAgent:</td>

<td><input type="text" name="useragent" style="width: 97%"></td>

</tr>

<tr>

<td colspan=2 >

<input type=button name=again style="width: 100%" value="Получить данные" onclick="display()"></td>

</tr>

</table>

</form>

</body>

</html>

6. Определите тип браузера на стороне клиента и выведите всю доступную информацию о нем.

7. Поместить на страницу кнопки: "открыть окно" и "закрыть окно". При нажатии кнопки "открыть окно" открывается новое окно, в котором выводятся часы (см. лаб. раб. №4). При нажатии кнопки "закрыть окно", созданное окно закрывается.

8. Пусть имеется ряд изображений. Создать эффект мультипликации на странице, для этого разработать сценарий смены изображений с заданной частотой. 11. Реализовать запуск и остановить мультипликацию по требованию пользователя по нажатию на кнопке. В качестве примера Animation.html.

9. На странице задан элемент, содержащий некоторый текст. Разработать сценарий, который при наведении мыши на элемент меняет текст на другой.

10. Задана таблица. Разработать сценарий, который при наведении мыши на ячейку меняет толщину и цвет границы.

11. На странице задан заголовок (1 строка) таблицы

Автор

Название книги

Создать 2 поля для ввода данной информации и кнопку. Разработать сценарий: при нажатии кнопки информация из полей ввода динамически помещается в конец таблицы.

Примечание: Работа с таблицами поясняется в документе Таблица как объект HTML.doc.

6. Организуйте страничку с фотографиями на своем персональном сайте в виде фотографии и двух указателей под ней: "предыдущая" и "следующая". Пример смотри в папке DHTML.

Задание 4. продолжать работу на странице из задания 1).

Ваш логотип
Меню …	Область А	Область B

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

В качестве маркеров в меню использовать небольшие изображения (например, ball.gif в текущей папке).

Задание 5. Пусть имеется K изображений. Разработать сценарий смены изображений с заданной частотой. В качестве примера Animation.html.

Задание 6. Создать сценарий отправки электронной почты.

Задание 7. На странице задан элемент, содержащий некоторый текст. Разработать сценарий, который при наведении мыши на элемент меняет текст на другой.

Задание 8. Задана таблица. Разработать сценарий, который при наведении мыши на ячейку меняет толщину и цвет границы.

Задание 9. На странице задан заголовок (1 строка) таблицы

Автор

Название книги

Создать 2 поля для ввода данной информации и кнопку. Разработать сценарий: при нажатии кнопки информация из полей ввода динамически помещается в конец таблицы.

10. Определение типа ОС и типа браузера клиента.

11. Создание контекстного меню.

12. Приветствие посетителя с учетом времени суток (утро, день, вечер).

13. Календарь.

14. Органайзер

15. Слои на веб-сайте.

20. Программирование форм. Создать Web-страницу с викториной из n вопросов с m возможными вариантами ответов.

21. Голосование

22. Решение квадратных уравнений -------х2 +------х +-------- =0

24. Навигация по сайту

25. Работа с текстовыми строками из формы: объединение, сравнение, нахождение длины, удаление HTML-тегов из строки, удаление пробелов вначале и в конце.

26. Перевод строки в разные кодировки: KOI8-R, WINDOWS-1251, UTF-8

27. Конвертация даты из одного формата в другой.

28. Регистрация страниц в поисковых систе­мах на стороне клиента.

29. Пользуясь Adobe Dreamweaver поместите на сайт не менее одного элемента Spry. Например, панель меню Spry, панели со вкладками Spry, набор вкладок Spry, сворачивающаяся панель Spry, подсказка Spry или др. Внимательно изучите .js и .css файлы для вставленных элементов.

30. . Ознакомтесь с работой Ajax.