Пятничные сниппеты. 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>
разрешенные теги или посмотреть как будет выглядеть
counter strike mt2 silkroad pvp metin2 metin2 pvp knight pvp gm olarak başlayan pvpler pvp silkroad pvp serverler counter strike serverler msn show cam show görüntülü sohbet oyunlar suskunlar gazete oku