Прошло немало времени прежде чем у дизайнеров пользовательских интерфейсов появились такие инструменты как HTML5, CSS3 и 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
Сохраните — пригодится.
Больше полезных материалов по веб-разработке на моем канале в Телеграм.
Обязательно подпишитесь.