На сегодняшний день тема веб-дизайна является, пожалуй, одной из наиболее популярных — причем не только в бумажной литературе и на курсах повышения компьютерной грамотности, а также в многочисленных периодических специализированных и общепопулярных изданиях — как сетевых, так и оффлайновых. Действительно, переживая в настоящее время очередной приступ глобального интереса и пристального внимания к вопросам создания и продвижения Интернет-проектов, общественность желает быть в курсе всех событий, так или иначе касающихся современных информационных технологий, и получать наиболее полезную и достоверную информацию в целях самосовершенствования и самообучения.
Цель данной статьи, которая открывает новый цикл материалов, — отнюдь не пересказ неких прописных истин, которые описаны в многочисленной специализированной литературе. Прежде всего статьи этого цикла будут интересны начинающим веб-мастерам, желающим узнать новые возможности, казалось бы, известных аспектов сайтостроительства.
Также хочется добавить, что планируемый рассказ о различных приемах и «примочках» веб-программирования не подразумевает того, что я призываю вас — мои дорогие читатели — к тому, чтобы, узнав пару-тройку интересных скриптов, вы остановились на достигнутом. Наоборот — открываемым циклом статей я постараюсь донести до вас глубину возможностей и функционального размаха различных языков и стандартов и сподвигнуть вас к более детальному изучению предмета. А параллельно складывать публикуемые примеры в отдельную «копилочку».
И последнее, что я бы хотел сказать, прежде чем перейти к сегодняшним примерам. Все публикуемые в пределах данного цикла статей приемы и листинги не претендуют на звание новых и неизвестных абсолютно для всех читателей. Возможно, кто-то уже знает и давно с успехом использует в своей практике некоторое из того, что я предложу. Итак, если вы готовы, я, пожалуй, начну первый выпуск цикла «Копилка веб-мастера».
Куда пойти, куда податься?…
Горячие споры касательно несовместимости двух популярных браузеров — Microsoft Internet Explorer (далее MSIE) и Netscape Navigator (далее NN) — с точки зрения отображения веб-документов, начался довольно давно и до сих пор сторонники ни того, ни другого браузера никак не могут прийти к единому решению. Настоящий веб-мастер должен понимать, что нельзя терять и доли потенциальной аудитории посетителей сайта из-за различных моделей браузеров. Поэтому придется более обстоятельно и скрупулезно подойти к HTML-верстке (и, естественно, разбираться при этом во всех особенностях обоих браузеров — MSIE и NN), чтобы страницы и там, и там одинаково смотрелись, либо делать две версии сайта.
Последний вариант иногда оказывается наиболее подходящим, например, когда вы хотите обязательно использовать некоторые элементы, не поддерживаемые одним из браузеров, или ваш сайт не очень велик по размеру.
Итак, нам нужно, чтобы после загрузки начальной страницы браузер посетителя, в зависимости от своей модели и версии, перешел на определенную страницу, предназначенную именно для него. Для этого необходимо вставить в код первой страницы вашего сайта следующий скрипт (между тегами <HEAD> и </HEAD>):
<script language=»JavaScript»>
<!—
if((navigator.appName == «Netscape») &&
(parseInt(navigator.appVersion) >= 4 ))
window.location.href = «nn4.html»;
else if((navigator.appName == «Netscape») &&
(parseInt(navigator.appVersion) == 3 ))
window.location.href = «nn3.html»;
else if((navigator.appName == «Microsoft Internet Explorer») &&
(parseInt(navigator.appVersion) >= 4 ))
window.location.href = «msie4.html»;
else if((navigator.appName == «Microsoft Internet Explorer») &&
(parseInt(navigator.appVersion) == 3 ))
window.location.href = «msie3.html»;
else
window.location.href = «unknown.html»;
// —>
</script>
Как видно из листинга, сперва определяется модель браузера, далее его версия и, в зависимости от последней (3.х или 4.х), посетитель переадресуется на соответствующий документ. Например, если у пользователя стоит Netscape Navigator 4.7, то сценарий перенаправит его браузер на страницу nn4.html. Если же у пользователя обнаружен браузер, не являющийся ни MSIE, ни NN, сценарий откроет файл с именем unknown.html. Если необходимо, можно ограничиться только последними версиями или наоборот — добавить строки для еще более ранних версий (последний способ вообще из области фантастики, т.к. потребуется уйма времени на сайт по каждой из версий).
Семь пятниц на неделе
Если вы хотите сделать свой сайт еще более привлекательным, то должны понимать, что без определенного количества интерактивных элементов количество посещений навряд ли будет стабильно высоким (хотя в ряде случаев динамическое «поведение» документа не нужно или даже противопоказано). Следующий сценарий, написанный на языке JavaScript, позволяет выводить различный текст в зависимости от дня недели: в понедельник один, во вторник — уже совершенно другой, в среду третий и т.д.:
<script language=»JavaScript»>
nowDate=new Date();
theDay=nowDate.getDay();
text=new Array(30);
text[0]=»Сегодня воскресенье и мы пойдем гулять»;
text[1]=»Сегодня на работу»;
text[2]=»И снова на работу…»;
text[3]=»Как? Опять на работу?»;
text[4]=»Только не говорите, что сегодня тоже на работу!»;
text[5]=»Дурацкая работа!!!»;
text[6]=»Сегодня самый хороший день, потому что завтра — воскресенье!»;
document.write(text[theDay]);
</script>
Следует помнить, что указание текста начинается с воскресенья (text[0]) и помещать данный код следует в разделе BODY. Остается добавить, что данный прием часто используется на мультифункциональных Интернет-порталах, электронных биржах и магазинах, презентационных ресурсах и, само собой разумеется, — на домашних страницах пользователей.
Время пролетит незаметно
Если вы считаете себя настоящим путешественником Сети (web-surfer), то наверняка бывали на сайтах, времянахождение на которых ограничено. Режим наложения временного ограничения на нахождение конкретного посетителя на странице может быть использован в таких случаях, как онлайн-тестирование (тот же самый TecMetrics, а ныне — BrainBench), бесплатный кратковременный демонстрационный показ товара или услуги и т.д. Да мало ли можно придумать ситуаций, когда долгое пребывание на определенной веб-странице нежелательно? Вот вам, например, самый что есть бытовой случай: на своей домашней страничке вы заводите фотоальбом. Он состоит из двух разделов: общедоступные фотографии, на которых вы читаете Шекспира в подлиннике, сидите в театре или переводите старушку через дорогу; и фото, не пропущенные цензурой, а потому разрешенные для просмотра лишь для узкого круга лиц. Спросите: а зачем здесь ограничитель времени? Ну как же? За 5 секунд ваши друзья успеют только лишь вдоволь посмеяться над вами, мирно спящими в костюме Адама с соленым огурцом в руке под новогодней елкой, а за минуту-две — в состоянии успокоиться и скопировать смешную картинку к себе на компьютер с целью ее незаконного тиражирования и распространения по Интернету в платных эротических рассылках. Чего это вы там прячите? Да не нужны мне ваши новогодние фотографии! Вы лучше код скрипта запишите:
<body onLoad=»begintimer()»>
<script>
<!—
var limit=»1:00″
if (document.images){
var parselimit=limit.split(«:»)
parselimit=parselimit[0]*60+parselimit[1]*1
}
function begintimer(){
if (!document.images)
return
if (parselimit==1)
window.location=»http://www.page.ru/timeout.html»
else{
parselimit-=1
curmin=Math.floor(parselimit/60)
cursec=parselimit%60
if (curmin!=0)
curtime=curmin+» минут(ы) и «+cursec+» секунд(ы) осталось»
else
curtime=cursec+» секунд(ы)»
window.status=curtime
setTimeout(«begintimer()»,1000)
}
}
//—>
</script>
В данном примере лимит пребывания на странице — одна минута (var limit=»1:00″), после чего браузер перенаправит посетителя по адресу http://www.page.ru/timeout.html. Причем в случае попытки пользователя нажать кнопку браузера «Назад», скрипт блокирует переход, и браузер снова загружает указанную страницу. Код размещается в разделе BODY. Также необходимо помнить, что диапазон указания секунд до редиректа должен быть от 0 до 59.
Куда поедем, барин?
Следующий пример позволяет автоматически перенаправлять посетителя вашего сайта на любой другой адрес, указанный в строке запроса. Вот, собственно, сам скрипт:
<script language=»JavaScript»>
<!—
function GoToURL(j)
{
window.status=(‘Попытка соединения…’)
var URLis;
URLis = document.URLframe.Destination.value
if (URLis == «» || URLis.length <= 8)
{
j.value = «Попробуйте снова»
alert(‘\Опаньки!\n\Нет связи’);
window.status=(‘Ох уж эти провайдеры!…’)
}
else
{
j.value = «Идет попытка соединения с http://» + URLis
var location=(«http://» + URLis);
this.location.href = location;
window.status=(‘Идет попытка соединения с ‘ + URLis + ‘ Извольте обождать, барин…’);
}
}
//—>
</script>
Так как посетитель сам будет вводить адрес, необходимо на страницу (тоже в раздел BODY, как и код сценария) поместить специальную форму, функционально взаимосвязанную с кодом скрипта. В целом, вы вправе задавать абсолютно любые значения атрибутов тега FORM, однако есть и обязательные значения (о них чуть позже). Вот примерный листинг для формы ввода адреса:
<form name=»URLframe»>
<strong>http://</strong>
<input type=»text» name=»Destination» size=»45″ maxlength=»50″>
<input type=»button» value=» Перейти» onclick=»GoToURL(this)»>
</form>
Обращаю особое внимание на значение «URLframe» атрибута NAME тега FORM, значение «Destination» атрибута NAME первого тега INPUT (строка запроса адреса) и значение onclick=»GoToURL(this)» второго тега INPUT (кнопка), инициирующие запуск скрипта.
В случае если у вас нет соединения с Интернетом (или таковое на момент запуска скрипта было нарушено), то браузер выдаст сообщение об ошибке (в данном примере это «Опаньки! Нет связи»). После чего надпись на кнопке подтверждения «Перейти» будет заменена другой надписью — «Попробуйте снова», а в статусной строке можно увидеть «Ох уж эти провайдеры!…». Если же связь с Интернетом есть, статусная строка выдаст «Идет попытка соединения с … (указанный адрес). Извольте обождать, барин…». Разумеется, все эти значения могут быть легко изменены на другие — более, по вашему мнению, подходящие.
Покажите ваши документы!
Если на вашем сайте есть какая-нибудь форма для ввода пользовательской информации, порой так бывает нужно проконтролировать полное заполнение всех граф. А доступа на запуск CGI или PHP-скриптов на сервере, предоставляющем вам хостинг, у вас нет. Что же делать? Оказывается, выход есть и теперь до тех пор, пока посетитель не укажет все требуемые данные, кнопка отправки просто-напросто не покажется! Реализуется этот прием при помощи Dynamic HTML и JavaScript. Применение первой технологии знающих людей должно было насторожить: известно, в каких отношениях динамический HTML и Netscape Navigator. И действительно: к сожалению, трюк не срабатывает даже в последних версиях этого браузера. Тем не менее, он может заинтересовать тех, кто делает по две копии сайта (для разных браузеров). Код скрипта выглядит так (размещается в разделе HEAD):
<script>
<!—
var iscomplete=false
function checkform()
{
iscomplete=true
for (i=0;i<=document.myform.elements.length-1;i++) {
if (document.myform.firstname.value==»») {iscomplete=false}
if (document.myform.lastname.value==»») {iscomplete=false}
if (document.myform.email.value==»») {iscomplete=false}
if (document.myform.homepage.value==»») {iscomplete=false}
if (document.myform.city.value==»») {iscomplete=false}
}
if (!iscomplete) {
window.status=»Пожалуйста, заполните все пункты»
if (document.all) {
submitbutton.style.visibility=»HIDDEN»
iscomplete=false
}
if (document.layers) {
document.myform.submitbut.value=»Еще нет»
iscomplete=false
}
}
if (iscomplete) {
window.status=»Вы заполнили все графы и теперь можете отправить свою информацию»
if (document.all) {
submitbutton.style.visibility=»VISIBLE»
iscomplete=true
}
if (document.layers) {
document.myform.submitbut.value=»Теперь»
iscomplete=true
}
}
var timer= setTimeout(«checkform()»,200)
}
function oksubmit() {
return iscomplete
}
</script>
Далее необходимо в тег BODY вписать onload=»checkform()», чтобы скрипт запускался при загрузке документа. Как видно из листинга, скрипт контролирует занесение в 5 пунктов: имя, фамилия, e-mail, адрес сайта (WWW) и город:
if (document.myform.firstname.value==»») {iscomplete=false}
и т.д.
Аналогичным способом можно вписывать сколько угодно строк (по разным параметрам). Настройка атрибутов формы производится в индивидуальном порядке, однако следует помнить о значениях атрибута NAME тегов INPUT, которые соответствуют условиям выполнения скрипта, событии onsubmit и обязательном указании свойства HIDDEN (скрытый) для блока, в котором после заполнения всех граф должна будет появиться кнопка подтверждения (Submit). Вот примерный код для формы:
<form name=»myform» onsubmit=»return oksubmit()» action=»mailto:name@address.ru» method =»post»>
Имя: <input name=»firstname» type=»text» SIZE=»30″>
Фамилия: <input name=»lastname» type=»text» size=»30″>
E-mail: <input name=»email» type=»text» size=»30″>
WWW: <input name=»homepage» type=»text» size=»30″>
Город: <input name=»city» type=»text» size=»30″>
<div align=»left» id=»submitbutton» style=»visibility:hidden»>
<input name=»submitbut» type=»submit» value=»Отправить»>
</div>
</form>
Пданируете поехать отдыхать на долгий срок? — Выбирайте Эмираты! Узнать сколько можно в ОАЭ без визы можно на сайте garant.in.
