Shurik Soft
Главная
Вход
Регистрация
Вт, 16.10.2018, 05:37Приветствую Вас Гость | RSS
Меню сайта

Категории каталога
Delphi [2]
C++ [0]
Web-дизайн [2]
Другое... [2]

***

Главная » Статьи » Программирование » Web-дизайн

JavaScript: полезные функции

Определение типа и версии броузера

Как известно, броузеры отличаются широтой толкования стандартов HTML. Один и тот же код в каждом из броузеров проявляется несколько по-разному. Чтобы получить одинаковый результат, иногда требуется писать разный код - для каждого броузера свой. И, разумеется, функция, которая бы сообщала нам о том, подходит броузер для отображения странички в полном объёме или нужно ограничиться урезанной версией, была бы как нельзя кстати.

Узнать тип используемого броузера достаточно просто. Нужно прочитать значение свойства appName объекта navigator. Точно таким же образом из свойства navigator.appVersion мы выуживаем версию броузера. Все это реализуется следующим фрагментом кода:

var browser_name = navigator.appName;
var browser_version = parseFloat(navigator.appVersion);

В принципе, эти переменные уже можно использовать для того, чтобы писать броузерозависимый код. Но мы поступим немного по-другому и для удобства воспользуемся механизмом флажков. Т.е. определим некую глобальную логическую переменную, например, browser_ok и в зависимости от результата проверок полученных ранее переменных browser_name и browser_version присвоим ей значение true (если по результатам проверки броузер удовлетворяет неким условиям) или false (в противном случае).

Логичный вопрос - зачем всё нужно так усложнять? И ответ - для упрощения написания сложных функций и избежания повторных проверок.

Итак, вот пример кода, в котором мы проверяем броузер на соответствие следующим критериям: он должен быть либо Internet Explorer, либо Netscape Navigator и иметь версию не ниже 4-ой:

var browser_ok = false;

if (browser_name == "Netscape" && browser_version >= 4.0)
    browser_ok = 'true';
else if (browser_name == "Microsoft Internet Explorer" &&
    browser_version >= 4.0)
    browser_ok = 'true';

Разумеется, условие может быть и более сложным, в зависимости от того, какие цели Вы преследуете. Кроме проверки типа и версии броузера мы можем также узнать количество используемых цветов, ширину и высоту экрана, возможность поддержки определённых плагинов и другие не менее полезные вещи, а, значит, и скорректировать поведение скрипта. Можно завести более одного флажка, если мы собираемся писать разный код для разных броузеров. В данном конкретном случае мы просто выполнили проверку броузера на соответствие 4-ой версии. Это было сделано с целью безболезненного отсечения старых версий броузеров (чтобы они не показывали ошибку при обращении к страничке) и для проверки возможности использования DHTML.

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

function somefunction() {
    if (browser_ok == 'true') {
         // здесь и располагается зависимый код
    }
}

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

Генерация случайного числа

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

Для генерации случайного числа мы воспользуемся JavaScript-объектом Math, метод random которого генерирует случайное число от 0 до 1. Но, так как нам обычно нужны целые числа из некоего диапазона, то будет логичным написать небольшую функцию, которая все это будет делать автоматически. Вот как выглядит соответствующий фрагмент кода:

function getrandom() {

    var min_random = 0;
    var max_random = 10;

    max_random++;

    var range = max_random - min_random;
    var n=Math.floor(Math.random()*range) + min_random;

    return n;
}

Перед использованием скрипта нужно лишь определить границы диапазона, в которых генерируется случайное число (соответственно, переменные min_random и max_random)
 

Дата модификации документа

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

Есть два способа добиться нужного нам результата. Первый заключается в том, что строчку с датой вы корректируете вручную, а второй, и он более привлекательный, заключается в использовании свойства lastModified объекта document. Для этого в нужном месте странички достаточно вставить следующую конструкцию:

<script language="JavaScript">
<!--

document.write ("Дата последней модификации: " + document.lastModified);

//-->
</script>

Дата выводится в формате, соответствующем региональным настройкам компьютера, а это не всегда нам подходит. Но, несколько усложнив скрипт, мы сможем выводить дату практически в любом формате. Для этого достаточно печатать дату модификации документа не сразу, а предварительно разобрав её на составляющие. Сделать это можно при помощи создания объекта Date, передав ему в качестве параметра document.lastModified:

<script language="JavaScript">
<!--

LastDate = new Date(document.lastModified);

LastDay = LastDate.getDate(); // Считываем число
LastMonth = LastDate.getMonth(); // Считываем месяц
LastYear = LastDate.getYear(); // Считываем год

LastYear = LastYear % 100;
LastYear = ((LastYear < 50) ? (2000 + LastYear) : (1900 + LastYear));

document.write ("Дата последней модификации: ", LastDay, "/", LastMonth+1, "/", LastYear);

//-->
</script>

Теперь осталось только прочитать день, месяц и год, воспользовавшись методами объекта Date и напечатать дату в нужном нам формате. Именно так и сделано в вышеприведённом скрипте, который печатает дату в формате, соответствующем региональным настройкам России (ДД/ММ/ГГГГ).

Обратите внимание на два обстоятельства. Первое - это то, что при печати месяца мы увеличиваем его на единичку, так как метод getMonth() возвращает нам номер месяца в виде целого числа от 0 (январь) до 11 (декабрь).

А второе заключается в том, что год мы печатаем не сразу, а вначале решаем проблему 2000 года. В данном случае эта проблема заключается в том, что метод getYear() в версии JavaScript от Microsoft возвращает нам год в виде четырёх цифр, а в версии Netscape Navigator в виде последних двух (после 2000 года в виде трех :), которые следует рассматривать как смещение от 1900 года.

Решение проблемы осуществляется достаточно просто - вначале мы берём остаток от целочисленного деления на 100 и тем самым гарантированно получаем год в виде двух последних цифр. Теперь нужно выяснить, к какому веку относятся эти две цифры - для этого мы сравниваем их с 1950-м годом и считаем, что если число меньше 50, то это уже новый век, а иначе - старый. Данным способом мы превратили проблему 2000 года в проблему 2050 года :), когда эта уловка уже наверняка потеряет смысл.

Как сделать страничку стартовой?

В последнее время стало достаточно модным применять этот скрипт. Его смысл заключается в том, что где-нибудь на видном месте странички мы делаем ссылку, нажав на которую пользователь сможет сделать Вашу страничку стартовой, т.е. такой, которая загружается при запуске броузера и нажатии на кнопку "Домой".

Этот приём может быть полезен для информационных ресурсов, но не стоит им особо злоупотреблять.

К сожалению, на данный момент скрипт будет работать только под Internet Explorer версии 5.x. Учтите это. Сам же код требуется разместить в подходящем месте, а выглядит он так:

<p><a href="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://shuriksoft.ucoz.ru/'); return false;">Сделать стартовой страницей</a></p>

Желающие могут сделать стартовой, например, мою страничку. ;-)

Добавление странички в "Избранное"

Подобно предыдущему скрипту, этот приём также работает лишь под Internet Explorer, но уже начиная с 4-ой версии. И точно такие же замечания по поводу его уместности.

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

<p><a href="#" onClick="window.external.addFavorite('http://shuriksoft.ucoz.ru/', 'Description'); return false;">Добавить сайт в Избранное</a></p>

Желаете проверить? Нажмите здесь, и Вы сможете добавить в избранное мой сайт. :-)

Распечатка страницы из кода

Иногда требуется распечатать страничку, причём сделать это нужно непосредственно из кода. Сначала кажется, что это невозможно, но всё не так плохо. На самом деле в Netscape Navigator для этого есть даже встроенный механизм. Достаточно просто вызвать метод window.print()

А вот для получения такого же результата в Internet Explorer мы применим не совсем обычный способ и воспользуемся специализированным объектом ActiveX, который и позволит нам распечатать страничку.

Таким образом, наша задача разделилась на две части. Первая - определить тип броузера, а вторая - корректно вставить объект на страничку. Вот пример кода, который делает все необходимые действия:

<script language="JavaScript">
<!--

var browser_name = navigator.appName;

function printit() {

    if (browser_name == "Netscape") {
        window.print();
    } else {
        var WebBrowser = '<object id="WebBrowser1" width=0 height=0
        classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2"></object>';
        document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
        WebBrowser1.ExecWB(6, 2);
    }
}

//-->
</script>

Осталось только вызвать этот код. Для этого, к примеру, можно воспользоваться событием onClick:

<a href="#" onClick="printit();">Распечатать статью</a>

Только не путайте этот скрипт с версиями страничек "для распечатки". Страничка для распечатки - это обычный html-файл, из которого убрали дизайнерское оформление и оставили очень простую вёрстку, чтобы при печати не было лишних элементов. Приведённый же выше код непосредственно посылает страничку на принтер.
 

Общие соображения и HTML-код формы

Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо её вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна - проверить, что пользователь заполнил все нужные поля перед отправкой и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя.

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

<form action="/cgi-bin/formmail.cgi" onsubmit="return SendForm();">

Ваше имя: *<input type="text" name="name"><br>
Электронный адрес: *<input type="text" name="email"><br>
Тема сообщения: <input type="text" name="subject"><br>
Сообщение: <textarea name="message"></textarea><br><br>

<input type="submit" value="Отправить">
<input type="reset" value="Очистить">

</form>

* - необходимые для заполнения поля

Заметьте, что в отличие от обычной формы непосредственно в теге <form> мы отслеживаем событие onsubmit и при его наступлении вызываем функцию проверки формы SendForm().

Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onClick? Ответ простой - при использовании события onClick кнопку "Submit" придётся заменить обычной кнопкой. И, в случае, если в броузере отключена поддержка JavaScript, мы не сможем отправить форму (!). Отслеживание же события OnSubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.

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

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

Функция проверки формы перед отправкой

А теперь перейдём к главному - к написанию той самой функции, что будет непосредственно осуществлять проверку формы. Давайте подумаем, что нам от неё требуется? Ну, во-первых, проверить, что нужные поля заполнены, а во-вторых - отослать форму. В случае же, если несколько из обязательных полей пусты, нам нужно сформировать об этом сообщение пользователю и переместить курсор на соответствующий элемент.

Для начала напишем общую обвязку функции:

<script language="JavaScript">
<!--

function SendForm() {

    // Здесь мы разместим код функции

    return true;
}

//-->

</script>

Применённый нами способ вызова функции через событие onSubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.

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

<script language="JavaScript">
<!--

function SendForm() {

if (document.forms[0].name.value == "") {
    alert('Пожалуйста, введите Ваше имя');
    document.mailform.name.focus();
    return false
    }

if (document.forms[0].email.value == "") {
    alert('Пожалуйста, введите электронный адрес');
    document.mailform.email.focus();
    return false
    }

return true;
}

//-->

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

  • сначала проверяем, что данное поле является пустым. И если это так, то
  • выводим сообщение об ошибке при помощи встроенной функции alert(). После того, как пользователь закроет окошко, мы
  • воспользуемся методом focus() и переместим курсор на ошибочное поле. И, наконец,
  • выйдем из функции, установив флажок успешности выполнения в false.

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

Универсальная функция проверки

Если нам необходимо проверить всего два или три поля, то с таким методом проверки "по-одиночке" ещё можно смириться, но что, если их несколько десятков? А ведь такое не редкость - особенно в сложных анкетах. Поэтому мы немного модифицируем нашу функцию, чтобы она не зависела от количества проверяемых полей.

Первым делом мы создадим массив, где перечислим имена всех полей, которые требуют проверки:

required = new Array("name", "email");

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

Дополнительно к вышеописанному массиву мы добавим ещё один, который будет содержать текст ошибки для конкретного поля:

required_show = new Array("Ваше имя", "электронный адрес");

Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа "name не введён".

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

<script language="JavaScript">
<!--

required = new Array("name", "email");
required_show = new Array("Ваше имя", "электронный адрес");

function SendForm () {

var i, j;

for(j=0; j<required.length; j++) {
    for (i=0; i<document.forms[0].length; i++) {
        if (document.forms[0].elements[i].name == required[j] && document.forms[0].elements[i].value == "" ) {
            alert('Пожалуйста, введите ' + required_show[j]);
            document.forms[0].elements[i].focus();
            return false;
        }
    }
}

return true;
}

//-->

</script>

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

Вот, в общем-то, и всё. Данная функция вполне универсальна и с минимальными корректировками (в сущности - содержимое двух массивов) может быть адаптирована к любой форме.



Источник: http://www.cherry-design.ru/articles/article_23.htm
Категория: Web-дизайн | Добавил: AlexSoft (15.12.2008)
Просмотров: 52491 | Комментарии: 65 | Рейтинг: 0.0/0 |
Всего комментариев: 411 2 3 4 5 »
41  
Приветствую! Смотрела у вас тут этот фильм (На пятьдесят оттенков темнее -полную версию) Вот: http://kinopoisky.ru/29605-na-pyatdesyat-ottenkov-temnee.html - shuriksoft.ucoz.ru/kino/На пятьдесят оттенков темнее
Понравился очень, необычное кино. прикольно) Хи хи))
Кто еще Смотрел этот фильм?

40  
Всем Привет! Смотрите оригенальный видеоролик
С канала - https://www.youtube.com/watch?v=Fssi0Z0_JDI

39  
http://loveawake.ru - Знакомства Казань, Жанна, 41 год, Сарказм - не оргазм...Понятен не всем.Тактичность - это умение вовремя прикинуться слепым,глухим ... - Знакомства на Loveawake.Ru

38  
http://loveawake.ru - Знакомства на Loveawake.Ru

37  
на вышеприведенном интернет-портале вы можете посмотреть большой ассортимент интересных статей про http://ublaze.ru/forum/ftopic1072.html - триколор личный кабинет пароль

36  
интернет знакомства волжский
http://mupgas.ru/user/Joremono/

интернет знакомства в самаре бесплатно
http://uzkabel.uz/user/Joremono/

знакомства для интернета с замужними
http://startpromo.ru/user/Joremono/

знакомства интернет за деньги
http://mrel.ru/i/user/Joremono/

интернет знакомства в сочи
http://mp4-films.net/user/Joremono/

интернет знакомства без регистрации саратов
http://96.0.30.104/member.php?u=41668

интернет знакомства с номерами
http://mimico.ru/user/Joremono/

интернет знакомства екатеринбург
http://tv3v.ru/user/Joremono/

интернет знакомства в смоленске
http://www.hdtv.com.pl/forum/members/joremono.html

интернет знакомства волжск
http://hesabdari.org/forum/member.php?action=profile&uid=3262

интернет знакомства в оренбурге бесплатно

35  
Забавно читать :)

34  
интернет знакомства г киров
http://www.ewealth.com/member.php?1028086-PdaSety

интернет знакомства в пятигорске
http://www.tochki.net/forum/profile.php?id=8059

интернет знакомства в нижневартовске
http://caait.ru/board/tools.php?event=profile&pname=PdaSocSet

бесплатные интернет знакомства в барнауле
http://www.stressbank.com/forum/profile.php?mode=viewprofile&u=9250

интернет знакомства бесплатно красноярск
http://www.habnet.ru/forum/member.php?u=40578

интернет знакомства бузулук
http://www.streetracersonline.com/forum/index.php?showuser=70924

интернет знакомства башкирия
http://www.knightonline.net/member.php?u=544026

http знакомства интернет
http://jinfo.ru/user/PdaSocSet/

бесплатные реальные знакомства для интернета
http://www.pnzagroteh.ru/user/PdaSocSet/

знакомства с женщинами для интернета
http://www.novoross-pino.ru/forum/index.php?s=e101414be0a31d51c1ba86084c07c1d1&showuser=1373

интернет знакомства без регистрации онлайн

33  
sex

32  
интернет знакомства без регистрации иркутск
http://cs-online.lt/index.php?action=profile;u=1416

интернет знакомства обьявления
http://forum.onu.edu.ua/index.php?action=profile;u=70425

интернет знакомства балашов
http://www.ti-se.ru/forum/index.php?showuser=38359

знакомства для анального интернета
http://www.megindo.net/smf2/index.php?action=profile;u=21973

интернет знакомства смотреть
http://www.apitrentine.it/forum/profile.php?id=1615

интернет видеочат знакомства
http://www.le-tresor.fr/fluxbb/upload/profile.php?id=201466

знакомства интернет бес смс
http://www.begemot.msk.ru/forum/index.php?action=profile;u=102277

бесплатные интернет порно знакомства
http://www.doska.qg.kz/tools.php?event=profile&pname=PdaSocSet

бесплатные интернет знакомства в тюмени
http://tur.nadvirna.info/forum/index.php?action=profile;u=169199

интернет знакомства ангарск
http://zarya-chern.ru/user/Tarentae/

интернет знакомства шахты

1-10 11-20 21-30 31-40 41-41
Имя *:
Email *:
Код *:
Форма входа

Поиск

Друзья сайта


Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Copyright «Shurik Soft» © 2018