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

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

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

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

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








Web-мастеру

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

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

Действие второе.

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

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

АВТОР: Запросто. А ты знаешь, для чего применяются новые окна?

ЧИТАТЕЛЬ: Нет. Просто хочу знать, как их создавать.

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

ЧИТАТЕЛЬ: Ну, не томи. Рассказывай.

АВТОР: Все просто. Окно открывается при помощи функции "open". Записывается в таком формате:

open("имя_файла");

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

ЧИТАТЕЛЬ: Нет здесь ничего интересного. Просто окно открывается. Обычное такое...

АВТОР: Это легко поправить. Средствами JavaScript мы можем создать окно с таким интерфейсом, с каким только пожелаем (в пределах разумного, конечно). Можно управлять такими элементами, как наличие меню, строки состояния, размещением окна относительно экрана, панели инструментов, размерами окна, наличием списка папок. Короче говоря, очень многим.

ЧИТАТЕЛЬ: Ухты. Теперь интересно. Рассказывай быстрее.

АВТОР. Вот список того, что можно использовать. Параметры:

directories - наличие или отсутствие строки со ссылками. Для того, чтобы согласиться, следует этому параметру присвоить значение "yes", для отказа - "no" (о том, где и как это делать скажу позже).

menubar - отсутствие или присутствие строки меню. Применяется аналогично первому.

location. Отображает или скрывает строку адреса. Вызывается точно так же: yes или no.

toolbar. Видимость панели инструментов. Кнопки "Домой", "Стоп", и т. д. Вызов - надоело повторять. Точно также.

scrollbars. Полосы прокрутки. Советую не убирать их, если вы заранее не знаете, поместится ли вся страница в ваше окно, или нет. Ели страница не помещается, то навигация по ней очень сильно усложнится.

resizable. Вы можете наградить пользователя возможностью менять размер созданного окна (присвоить свойству значение "yes"), а можете и запретить ("no", соответственно).

height. Высота открываемого окна. Здесь нужно писать не yes/no, а цифру - количество пикселей.

width. Ширина в пикселях. Задается аналогично высоте.

top. Расстояние между верхней границей окна и верхней границей экрана. Задается в пикселях

left. Расстояние между левой границей окна и левой границей экрана. Задается в пикселях.

Кстати, для всех свойств, которые принимают логические значения, то есть "yes" или "no", вместо "yes" можно использовать "1", а вместо "no" - "0".

ЧИТАТЕЛЬ: Да. Здесь список уже достаточно приличный. А как все эти свойства указываются?

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

ЧИТАТЕЛЬ: Ну, хорошо. Давай создадим.

АВТОР: Вот пример:

<html>
<head>
<title>Страница с создающимся окном!!!</title>
<script language="JavaScript">
function win() {
myWin=open("", "", "top=10,left=10,statusbar=no,toolbar=no,directories=no,location=no,menubar=no, width=200,height=100")
myWin.document.write('<img src="me.gif">');
setTimeout("myWin.close()",10000)
}
</script>
</head>
<body onload='win()'>
Дальше идет ваша страница!!!
</body>
</html>

Вот так вот. Что скажешь?

ЧИТАТЕЛЬ: Слишком много нового. Растолкуй. Во-первых: для чего перед open(…) стоит myWin=?

АВТОР: Если присмотреться к дальнейшему тексту скрипта, то видно, что через переменную myWin осуществляется обращение к "внутренностям" окна. Ясно? Что еще?

ЧИТАТЕЛЬ: Зачем в функции open() столько пустых кавычек?

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

А! Пока не забыл. Обрати внимание, что в строке, которая формирует внешний вид окна, между параметрами нет пробелов!

ЧИТАТЕЛЬ: Хорошо. А что означает setTimeout("myWin.close()",10000)?

АВТОР: setTimeout, это функция, которая позволяет выполнить операцию через заданный промежуток времени. Первый параметр - код на языке JavaScript, а второй - время задержки в миллисекундах (1000 мс. = 1 сек.).

ЧИТАТЕЛЬ: А что такое onLoad в теге?

АВТОР: Это одно из наших любимых событий, которое срабатывает при загрузке тела документа. Еще есть его менее известный антоним-братец - onUnload. Вызывается при выгрузке страницы из окна браузера. К примеру можно написать (в теге )

onUnload="alert('До свидания, я буду скучать по вам!!!')"

ЧИТАТЕЛЬ: Ясно. И что теперь?

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

ЧИТАТЕЛЬ: Давай по традиции сделаем что-то интересное и применительное.

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

ЧИТАТЕЛЬ: Ни в коем случае! Ни когда...

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

ЧИТАТЕЛЬ: Класс! Я согласен!

АВТОР: Вот. Ниже все расписано:

<html>
<head>
<title>Страница с создающимся окном!!!</title>
<script language="JavaScript">
var step=10
var winleft=0
var wintop=10
function win() {
myWin=open("bla.html", "myWin", "top=wintop,left=winleft,statusbar=no,toolbar=no,directories=no,location=no,menubar=no, width=200,height=150");
move();
}
function move() {
if (winleft<screen.width) {
myWin.moveTo(winleft,wintop);
winleft+=step;
setTimeout('move()',200);
}
else {
myWin.close();
}
}
</script>
</head>
<body onLoad="win()">
Этот код добавте сами!!!
</body>
</html>

Проверяй! Только здесь все несколько модифицировано, для запуска скрипта тебе нужно нажать на кнопку:

Ну, как? С чего начать объяснение?

ЧИТАТЕЛЬ: Давай начнем с самого начала. Что за словцо такое "var"? И что за слова идут после него?

АВТОР: Это означает, что ты хочешь объявить какую-то переменную, а затем присвоить ей значение. Для тебя это новое понятие в написании скриптов. Я остановлюсь на нем, но ненадолго. Переменные присутствуют во всех языках программирования. Как правило, переменные распределяются по типам. Основные типы это число и строка (в некоторых языках программирования есть тип для отдельного символа). В JavaScript основные типы - числа и строки, в зависимости от хранимых данных. Этот язык не требует их явного указания. Они определяются сами. Но вернемся к нашему примеру. В начале скрипта у нас инициализируются три переменные. Первая - step определяет, на сколько пикселей будет сдвигаться изображение. Переменная winleft указывает, на каком расстоянии от левого края рабочего стола будет размещаться левая граница окна. wintop определяет размещение верхнего края окна относительно верхней границы экрана. В принципе wintop - не обязательная переменная, но просто мне так больше нравится.

ЧИТАТЕЛЬ: А почему переменным даются именно такие имена? От чего они зависят?

АВТОР: Только от твоего воображения J. Переменной можно дать любое имя. Только не стоит давать имя, вроде, jhjksdfjkdhfjks J. Во-первых, ты его никогда не повторишь при обращении к переменной из скрипта, и не вспомнишь на следующий день, что она (переменная) содержит. Вот у меня, например, step - в переводе с английского - "шаг". Ясно и просто.

ЧИТАТЕЛЬ: Да... Ты мне дал пищу для размышлений. Но этим я займусь на досуге. Как работает функция win() мне понятно, но как работает функция move() - это загадка. Для начала: что такое if(…)?

АВТОР: Это условный оператор. То, что в скобках - некое условие. Вот полный синтаксис этого оператора.

if (условие) {
Оператор 1
Оператор 2

оператор n
}
else {
Оператор 1
Оператор 2

оператор n
}

"Условие", это может быть некое неравенство, как в нашем случае, или равенство. Но в любом случае, если это условие верно, выполняется блок операторов в первых фигурных скобках. Ели же это условие - ложь. Выполняется блок после слова "else". После выполнения одного из двух блоков скрипт выполняется дальше. Есть еще один вариант условного оператора - без else:

if (условие) {
Оператор 1
Оператор 2

оператор n
}

В этом случае, если условие верно, то выполняется блок в фигурных скобках, потом выполнение скрипта продолжается. Если условие не истинно, то этот блок пропускается, и выполнение продолжается, как будто ничего и не было. У нас же в скрипте проверяется, не вышло ли окно за пределы экрана (screen.width - ширина экрана). Ели нет, то окно перемещается на новую позицию. Происходит это следующим образом:

  1. К переменной winleft (текущему положению окна) прибавляется постоянное значение переменной step.
  2. После этого, через интервал в 200 миллисекунд функция move() вызывает сама себя при помощи setTimeout.
  3. Это все происходит в том случае, если условие winleft<screen.width верно, а если это не так (окно уже "уехало" за пределы экрана) то тогда оно закрывается: myWin.close().

ЧИТАТЕЛЬ: Класс! А что означает myWin.moveTo(winleft,wintop);

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

ЧИТАТЕЛЬ: Это все хорошие стороны. Но за все мои недолгие дни знакомства с компьютером я понял - не бывает полной совместимости. Особенно когда речь идет об Интеренете и браузерах. Где здесь может быть подловка?

АВТОР: Да. Раскусил. Есть и маленькая гадость, которую нам подсунули разработчики браузера Opera, сделав ему MDI интерфейс (Multi Document Interface - мульти-документный интерфейс). Все окна очень "криво" выглядят в опере.

ЧИТАТЕЛЬ: А можно это исправить. Я так понимаю, что самый лучший способ исправления, это узнать имя браузера посетителя, и если это Opera, просто не открывать окно.

АВТОР: Да. Все просто. Но не так, как кажется... Для того, что бы узнать пользуется ли наш посетитель Internet Explorer'ом нужно использовать все тот же if:
function browser_test() {
if (navigtor.appName="Microsoft Internet Explorer") {win()}
}

Здесь navigator.appName - имя браузера. Если оно совпадает с именем Майкрософтовой бродилки, выполняется функция из предыдущего примера (начинает создаваться окно).

ЧИТАТЕЛЬ: Два вопроса. Первый. Почему ты сказал, что все просто, но не так как кажется? Второй. Почему этот пример для Эксплорера, а не для Оперы?

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

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

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

Опера хоть и достаточно хороший браузер, но не все в нем предусмотрено... Но, не будем о плохом.

Ну, вот мы и научились создавать окна. Даже написали простой скрипт, который скрасит минуты пребывания пользователя на твоей странице. Что ты можешь сказать по этому поводу?

ЧИТАТЕЛЬ: Ничто так не "сушит мозги", как умственная деятельность. Пошли в буфет.

АВТОР: Пошли.

Занавес.




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

#131714#131714


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