Пятничные сниппеты. JavaScript

Пятничные сниппеты. JavaScript

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

Напомню, что предыдущие сниппеты были по CSS и jQuery.

1. Скрыть или показать элемент

function showhide(e)
{
el = document.getElementById(e);
el.style.display = el.style.display == "block" ? "none" : "block";
}

 

2. Определение браузера

// Internet Explorer
var ie = document.all != null; //ie4 and above
var ie5 = document.getElementById && document.all;
var ie6 = document.getElementById && document.all&&(navigator.appVersion.indexOf("MSIE 6.")>=0);

// Firefox
var ff = !document.layers && !document.all;

// Opera
var op = navigator.userAgent.indexOf("opera")>0;
var op7 = op && operaVersion() <= 7;
var op8 = op && operaVersion() >= 8;

// Detects the Opera version
function operaVersion()
{
agent = navigator.userAgent;
idx = agent.indexOf("opera");
if (idx>-1)
{
return parseInt(agent.subString(idx+6,idx+7));
}
}

 

3. Получение массива элементов по имени класса

function getElementsByClass(searchClass,node,tag) 
{
var classElements = new Array();
if (node == null) node = document;
if (tag == null) tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp('(^|s)'+searchClass+'(s|$)');
for (i = 0, j = 0; i < elsLen; i++)
{
if (pattern.test(els[i].className))
{
classElements[j] = els[i];
j++;
}
}
return classElements;
}

 

4. Установка, получение и удаление cookie

function getCookie( name ) 
{
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ((!start) && (name != document.cookie.substring( 0, name.length)))
{
return null;
}
if (start == -1) return null;
var end = document.cookie.indexOf(';', len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}

function setCookie (name, value, expires, path, domain, secure)
{
var today = new Date();
today.setTime(today.getTime());
if (expires)
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires));
document.cookie = name+'='+escape( value ) +
((expires) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
((path) ? ';path=' + path : '' ) +
((domain) ? ';domain=' + domain : '' ) +
((secure) ? ';secure' : '' );
}

function deleteCookie (name, path, domain)
{
if (getCookie(name)) document.cookie = name + '=' +
((path) ? ';path=' + path : '') +
((domain) ? ';domain=' + domain : '' ) +
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

 

5. Получение переменных из адресной строки

function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

// Использование.
// Пусть адрес такой: http://primera.vremenno.net?huj=est&blaa=da

// var hash = getUrlVars();
// alert(hash['huj']); // выдаст 'est'
// alert(hash['blaa']); // выдаст 'da'

 

6. Проверка корректности электронной почты

function checkMail(email)
{
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(email))
{
return true;
}
return false;
}

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 17

Soider
> "block" ? "none" : "block"; а можно конкретно эту запись пояснить ? Это, я так понимаю, если блок то поставить нон, иначе блок?
#
Soider
Жека
el.style.display == "block" ? "none" : "block";
Ага, можно показать на примере попроще:
x = 10;
y = x > 9 ? 100 : 200; 
Это значит, если x больше 9, вернуть 100 (то есть y присвоится 100), иначе 200. Весьма лаконично. Такие же конструкции есть не только в js, точно так же можно писать, например, на C#.
antohins
Определение браузера хотя бы функцию написали...
Smozjo
Спасибо, отличные снипеты! : )
#
Smozjo
Sanki
А функция [Проверка корректности электронной почтыk не корректна. Например ящик типа post@192.168.0.1 он возвращает false, хотя ящик написан корректно. Или post@-server.ru возвращет true, хотя сервер ящика некорректен. Предлагаю такую ф-цию: function checkMail(email) { var filter = /^[w-.]+@(([da-z][da-z-] .) [a-z]{2,4}|(d{1,3}.){3}d{1,3})$/gi; return filter.test(email) }
#
Sanki
Sanki
Что-то в кучу все собралось (тэг code не сработал). Попробую еще раз: function checkMail(email) { var filter = /^[w-.]+@(([da-z][da-z-] .) [a-z]{2,4}|(d{1,3}.){3}d{1,3})$/gi; return filter.test(email) }
#
Sanki
Sanki
в местах пробела должны быть (плюсы)
#
Sanki
Sanki

function checkMail(email) {
	var filter = /^[w-.]+@(([da-z][da-z-] .) [a-z]{2,4}|(d{1,3}.){3}d{1,3})$/gi;
	return filter.test(email)
}
#
Sanki
Алик Кириллович
Проверка валидности e-mail — далеко не тривиальная задача.

Вот так выглядит регулярное выражение для проверки соответствия адреса E-mail официальному стандарту RFC 2822:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*
|"(?:[- -!#-[]-]|\
[- -])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*
[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|
[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}
(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*
[a-z0-9]:(?:[- -!-ZS-]|\
[- -])+)])


Что немножко посложнее, чем в приведенном сниппете :-)
maugli
как использовать в javascript это ?

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*
|"(?:[- -!#-[]-]|\
[- -])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*
[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|
[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}
(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*
[a-z0-9]:(?:[- -!-ZS-]|\
[- -])+)])
#
maugli
Grin
maugli, это паттерн для проверки мыла, использовать вот так:
function checkMail(email) {
var filter = тут этот паттерн;
return filter.test(email)
}
#
Grin
Андрей
Grin, все равно не ясно как этот шаблон вставить в функцию...


function checkMail(email) {
   var filter = (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-x08x0bx0cx0e-x1fx21x23-x5bx5d-x7f]|
[x01-x09x0bx0cx0e-x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*
[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|
[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}
(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*
[a-z0-9]:(?:[x01-x08x0bx0cx0e-x1fx21-x5ax53-x7f]|
[x01-x09x0bx0cx0e-x7f])+)]);
   return filter.test(email)
}

брать в кавычки? в /^...$/ ?
#
Андрей
Arris
Ну естественно в кавычки!!! Нет, блин, прямо так писать.

И еще придется экранировать наверняка.
#
Arris
wcb-falcon
На счет Скрыть или показать элемент
если представить что это меню как сделать так чтобы переходя с одной странице на другую нужные элементы остались открытыми?
вот пример:

<script language="javascript">
window.onload = function() {
	var p1 = document.getElementById('p1');
	var p1_1 = document.getElementById('p1_1');
	var p1_2 = document.getElementById('p1_2');
	
	var p2 = document.getElementById('p2');
	var p2_1 = document.getElementById('p2_1');
	var p2_2 = document.getElementById('p2_2');
	
  p1.onclick = function(e) {
    if(!e) {
      var e = window.event;
	}
	p1_1.style.display = 'block';
	p1_2.style.display = 'block';
	
	p2_1.style.display = 'none';
	p2_2.style.display = 'none';
	return false;
  }  
  
  p2.onclick = function(e) {
    if(!e) {
      var e = window.event;
	}
	p1_1.style.display = 'none';
	p1_2.style.display = 'none';
	
	p2_1.style.display = 'block';
	p2_2.style.display = 'block';
	return false;
  }  
}
</script>

<style type="text/css">
#p1_1, #p1_2, #p2_1, #p2_2 {display:none;}
</style>

<ul>
  <li id="p1">меню_p1</li>
      <ul>
        <li id="p1_1"><a href="000_menu_p11.html">меню_p1_1</a></li>
        <li id="p1_2"><a href="000_menu_p12.html">меню_p1_2</a></li>
      </ul>
  <li id="p2">меню_p2</li>
      <ul>
        <li id="p2_1"><a href="000_menu_p21.html">меню_p2_1</a></li>
        <li id="p2_2"><a href="000_menu_p22.html">меню_p2_2</a></li>
      </ul>
</ul>
<hr>
#
wcb-falcon
Роман
Подскажите, а как у Вас работает, вот например при нажатии "дополнительная информация" выежает остальное все? Если есть урок, дайте ссылку пожалуйста!
#
Роман
KELiON
Показать/скрыть будет особенно хорошо смотреться для инлайновых элементов:)
#
KELiON
ling
Показать/скрыть:
el.style.display = el.style.display == "none" ? "" : "none";
#
ling

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler