Сегодня мне бы хотелось поделиться несколькими простыми, но весьма полезными сниппетами на JavaScript. Которые одинаково хорошо работают в любых современных браузерах. Я уверен, они вам не раз пригодятся.

1. Открываем ссылку в попап-окне

С помощью всего одной строки JavaScript вы можете открыть ссылку в новом попап-окне.

window.open("http://danilin.biz","newWindow");

2. Определяем закрытие браузера

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

function checkBrowser() {
  // triggers on clicking the close button, Alt+F4 , File->Close  
  if(window.event.clientX < 0 && window.event.clientY < 0) {
    window.open("somefile.html", "closewindow",'left=12000,top=1200,width=120,height=50');
  }
}

3. Получаем значения полей формы

Пригодится при работе с динамическими HTML-формами для получения значений полей.

<select id="menulist">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

<script>
var e = document.getElementById("menulist");
var optvalue = e.options[e.selectedIndex].value; // the option value attribute
var opttext  = e.options[e.selectedIndex].text; // internal text inside option element
</script>

4. Определяем браузер

JavaScript обладает столь же мощными средствами детектирования браузеров, как и PHP, Ruby или Python.

// 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);

// Netscape
var ns4 = document.layers != null;
var ns6 = document.getElementById && !document.all;
var ns  = ns4 || ns6;

// 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));
	}
}

5. Куки JavaScript

Уникальные функции JavaScript для работы с Cookie. Будут очень полезны начинающим разработчикам.

function setCookie(name, value) {
  if(name != '')
    document.cookie = name + '=' + value;
}

function getCookie(name) {
  if(name == '')
    return('');

  name_index = document.cookie.indexOf(name + '=');

  if(name_index == -1)
    return('');

  cookie_value =  document.cookie.substr(name_index + name.length + 1, document.cookie.length);

  //All cookie name-value pairs end with a semi-colon, except the last one.
  end_of_cookie = cookie_value.indexOf(';');
  if(end_of_cookie != -1)
    cookie_value = cookie_value.substr(0, end_of_cookie);

  //Restores all the blank spaces.
  space = cookie_value.indexOf('+');
  while(space != -1) { 
    cookie_value = cookie_value.substr(0, space) + ' ' + 
    cookie_value.substr(space + 1, cookie_value.length);

    space = cookie_value.indexOf('+');
  }

  return(cookie_value);
}

6. Определяем операционную систему

Бывает очень важно точно определить операционную систему посетителя сайта. Например, для того чтобы дать ссылку для скачивания приложения под используемую им ОС.

var system = navigator.appVersion;
if (navigator.appVersion.indexOf("Mac") != -1 ) OS = "Mac";
else if (navigator.appVersion.indexOf("PowerPC") != -1 ) OS = "Mac";
else if (navigator.appVersion.indexOf("Win") != -1 ) OS = "Win";
else if (navigator.appVersion.indexOf("SunOS") != -1 ) OS = "Solaris";
else  OS = "Linux";

//Determine Browser Version
bName = navigator.appName;
bVer  = parseInt(navigator.appVersion);

if (OS == "Mac" && bName=="Netscape") { 
  // your code here
}
else if (OS =="Mac" && bName=="Microsoft Internet Explorer") { 
  // your code here
}
else if (OS =="Win" || OS == "Linux" && bName == "Netscape") {
  // your code here
}
else if (OS =="Solaris" && bName=="Netscape") {
  // your code here
}
else if (OS =="Win" || OS == "Linux" && bName=="Microsoft Internet Explorer") {
  // your code here
}

7. Определяем мобильные устройства

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

var isMobile = {
  Android: function() {
    return navigator.userAgent.match(/Android/i);
  },
  BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i);
  },
  iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Opera: function() {
    return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
    return navigator.userAgent.match(/IEMobile/i);
  },
  any: function() {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
};

// Examples
if( isMobile.any() ) alert('Mobile');
if( isMobile.iOS() ) alert('iOS Device');

8. Размеры окна браузера

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

function report() { 
  document.getElementsByTagName('output')[0].innerHTML = 'screen.width:'+screen.width+'<br>screen.height:'+screen.height+'<br>window.innerWidth:'+window.innerWidth+'<br>window.innerHeight:'+window.innerHeight+'<br>window.outerWidth:'+window.outerWidth+'<br>window.outerHeight:'+window.outerHeight+'<br>document.documentElement.<br> clientWidth:'+document.documentElement.clientWidth+'<br>document.documentElement.<br> clientHeight:'+document.documentElement.clientHeight+'<br>window.devicePixelRatio:'+window.devicePixelRatio; 
}
window.addEventListener('load', report, false);
window.addEventListener('resize', report, false);
window.addEventListener('orientationchange', report, false);
window.addEventListener('deviceorientation', report, false);
window.addEventListener('MozOrientation', report, false);

9. Получаем параметры ссылки

Простая, но очень полезная функция из нескольких строк, которая формирует массив из передаваемых параметров URL.

function getUrlParam(name) {
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return (results && results[1]) || undefined;
}

10. Кнопка «назад» на JavaScript

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

<a href="javascript:history.back(1)">Назад</a>

11. Проверяем тип JS-объекта

Пригодится для отладки кода с большим количеством переменных.

function objIs(type, obj) {
    var clas = Object.prototype.toString.call(obj).slice(8, -1);
    return obj !== undefined && obj !== null && clas === type;
}

objIs('String', 'test'); // true
objIs('String', new String('test')); // true

Сохраните — пригодится.

Всё самое новое и интересное я публикую в своём Телеграм-канале. Подписывайтесь!