11 полезных JavaScript-сниппетов для динамических веб-проектов

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

Открыть ссылку в попап-окне

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

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

Определить закрытие браузера

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

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

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

Пригодится при работе с динамическими 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>

Определить браузер

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

Куки 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);
}

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

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

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
}

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

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

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

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

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

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

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

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

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

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

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

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

Проверить тип 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

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

Больше полезных материалов по веб-разработке на моем канале в Телеграм.
Обязательно подпишитесь.