15 полезных сниппетов кода JavaScript для ваших веб-сайтов

В наши дни JavaScript используется повсеместно в Интернете – для улучшения интерактивности веб-сайта, проверки информации и/или улучшения внешнего вида веб-сайта.

JavaScript впервые появился в 1995 году и с тех пор прошел долгий путь. Синтаксис, используемый в JavaScript, подвергся сильному влиянию C; но Java, Pearl, Python и Scheme также сыграли свою роль.

Плохо настроенный и неаккуратно написанный код JavaScripts замедлят работу вашего веб-сайта и вредит общей навигации сайта. Это, в свою очередь, влияет на показатель возврата ваших посетителей, а также на рейтинг в поисковых системах. Чтобы подтвердить мою правоту, поставьте себя на место пользователя. Если бы веб–сайт, который вы посещали, загружался медленно, на нем было трудно ориентироваться и, в целом, он был непривлекательным, вы бы вернулись на сайт? Я бы не стал.

В своем Javascript канале я публикую библиотеки, гайды, примеры кода и новости для JS разработчиков. А здесь я собрал папку полезных ресурсов для всех, кто интересуется Frontend разработкой.

Ниже приведен небольшой список вещей, о которых следует подумать при добавлении JavaScript на ваш веб-сайт.

Требуется ли JavaScript для правильной работы сайта?
Как будет выглядеть сайт без JavaScript кода?
Повлияет ли JavaScript на производительность сервера?
Поможет ли добавление JavaScript кода продвинуть ваш сайт?
Нет, я не пытаюсь отпугнуть вас этими пунктами.

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

15 классных примеров JavaScript кода для вашего сайта


Теперь давайте перейдем к материалам, ради которых вы сюда пришли – ниже приведен список из 15 примеров с JavaScript кодом, которые улучшат функциональность или внешний вид вашего сайта.

1. Блокировка воспроизведения видео

<script type="text/javascript">

function understands_video() {
return !!document.createElement('video').canPlayType; // boolean
}

if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}

</script>

Что делает фрагмент JavaScript?
Этот небольшой кусок предотвратит попытку вашего веб-сайта отобразить видео, которое браузер не может воспроизвести, экономя вычислительную мощность.

2. JavaScript Cookies

<script type="text/javascript">

/**

* Sets a Cookie with the given name and value.

*

* name       Name of the cookie

* value      Value of the cookie

* [expires]  Expiration date of the cookie (default: end of current session)

* [path]     Path where the cookie is valid (default: path of calling document)

* [domain]   Domain where the cookie is valid

*              (default: domain of calling document)

* [secure]   Boolean value indicating if the cookie transmission requires a

*              secure transmission

*/                        

function setCookie(name, value, expires, path, domain, secure) {

    document.cookie= name + "=" + escape(value) +

        ((expires) ? "; expires=" + expires.toGMTString() : "") +

        ((path) ? "; path=" + path : "") +

        ((domain) ? "; domain=" + domain : "") +

        ((secure) ? "; secure" : "");

}

</script>




<script type="text/javascript">

/**

* Gets the value of the specified cookie.

*

* name  Name of the desired cookie.

*

* Returns a string containing value of specified cookie,

*   or null if cookie does not exist.

*/

function getCookie(name) {

    var dc = document.cookie;

    var prefix = name + "=";

    var begin = dc.indexOf("; " + prefix);

    if (begin == -1) {

        begin = dc.indexOf(prefix);

        if (begin != 0) return null;

    } else {

        begin += 2;

    }

    var end = document.cookie.indexOf(";", begin);

    if (end == -1) {

        end = dc.length;

    }

    return unescape(dc.substring(begin + prefix.length, end));

}

</script>




<script type="text/javascript">

/**

* Deletes the specified cookie.

*

* name      name of the cookie

* [path]    path of the cookie (must be same as path used to create cookie)

* [domain]  domain of the cookie (must be same as domain used to create cookie)

*/

function deleteCookie(name, path, domain) {

    if (getCookie(name)) {

        document.cookie = name + "=" +

            ((path) ? "; path=" + path : "") +

            ((domain) ? "; domain=" + domain : "") +

            "; expires=Thu, 01-Jan-70 00:00:01 GMT";

    }

}

</script>

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

3 Предварительная загрузка изображений

<script type="text/javascript">
var images = new Array();

function preloadImages(){

    for (i=0; i < preloadImages.arguments.length; i++){

         images[i] = new Image();

        images[i].src = preloadImages.arguments[i];

    }

}

preloadImages("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");

</script>


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

4. Проверка E-mail

Head:

<script type="text/javascript">
function validateEmail(theForm) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(theForm.email-id.value)){
return(true);
}
alert("Invalid e-mail address! Please enter again carefully!.");
return(false);
}
</script>

Body:

<form onSubmit="return validateEmail(this);" action="">
E-mail Address:
<input type="text" name="emailid" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>

Этот код проверит, что в форму введен правильно отформатированный адрес электронной почты, но он не может гарантировать, что адрес электронной почты является реальным.

5. Запрет нажатия правой кнопки мыши на сайте

<script type="text/javascript">
function f1() {
  if(document.all) { return false; }
}
function f2(e) {
  if(document.layers || (document.getElementById &! document.all)) {
    if(e.which==2 || e.which==3) { return false; }
  }
}
if(document.layers) {
  document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown = f1;
}
else {
  document.onmouseup = f2;
  document.oncontextmenu = f1;
}
document.oncontextmenu = new function("return false");
</script>

Этот фрагмент не позволит пользователю щелкнуть правой кнопкой мыши на вашей странице. Это не даст пользователя возможности заимствовать изображения или код с вашего сайта.

6. Отображение случайных цитат на сайте

Head:

<script type="text/javascript">
  writeRandomQuote = function () {
    var quotes = new Array();
    quotes[0] = "Action is the real measure of intelligence.";
    quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
    quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one's level of peace of mind.";
    quotes[3] = "A good head and a good heart are always a formidable combination.";
    var rand = Math.floor(Math.random()*quotes.length);
    document.write(quotes[rand]);
  }
  writeRandomQuote();
</script>

Body:

<script type="text/javascript">writeRandomQuote();</script>

6. Отображение случайных цитат на сайте

Head:

<script type="text/javascript">
  writeRandomQuote = function () {
    var quotes = new Array();
    quotes[0] = "Action is the real measure of intelligence.";
    quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
    quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one's level of peace of mind.";
    quotes[3] = "A good head and a good heart are always a formidable combination.";
    var rand = Math.floor(Math.random()*quotes.length);
    document.write(quotes[rand]);
  }
  writeRandomQuote();
</script>

Body:

<script type="text/javascript">writeRandomQuote();</script>

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

7. Предыдущие/Следующие ссылки

<a href="javascript:history.back(1)">Previous Page</a> | <a href="javascript:history.back(-1)">Next Page</a>

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

8. Добавьте страницу в закладки

<a href="javascript:window.external.AddFavorite('https://uproger.com/', 'uproger site')">Add to Favorites</a>

Этот сниппет позволит пользователю с легкостью добавить вашу страницу в закладки; все, что ему нужно сделать, это нажать на ссылку. Такие функции, как эта, могут улучшить общее впечатление от просмотра вашего сайта.

9. Ссылка на страницу для печати

<a href="javascript:window.print();">Print Page</a>

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

10. Вывод отформатированной даты

Head:

<script type="text/javascript">
  function showDate() {
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //months are zero based
    var curr_year = d.getFullYear();
    document.write(curr_date + "-" + curr_month + "-" + curr_year);
  }
</script>

Body:

<script type="text/javascript">showDate();</script>

Этот код позволит вам отображать текущую дату в любом месте вашей веб-страницы и не нуждается в обновлении.

11. Разделитель запятыми

Head:

<script type="text/javascript">
function addCommas(num) {
  num += '';
  var n1 = num.split('.');
  var n2 = n1[0];
  var n3 = n1.length > 1 ? '.' + n1[1] : '';
  var temp = /(d+)(d{3})/;
  while (temp.test(n2)) {
    n2 = n2.replace(temp, '' + ',' + '');
  }
  var out = return n2 + n3;
  document.write(out);
}
</script>

Body:

<script type="text/javascript">addCommas("4550989023");</script>

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

12. Получить область отображения браузера

<script type="text/javascript">

<!--

var viewportwidth;

var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined')

{

      viewportwidth = window.innerWidth,

      viewportheight = window.innerHeight

}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined'

     && typeof document.documentElement.clientWidth !=

     'undefined' && document.documentElement.clientWidth != 0)

{

       viewportwidth = document.documentElement.clientWidth,

       viewportheight = document.documentElement.clientHeight

}

// older versions of IE

else

{

       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,

       viewportheight = document.getElementsByTagName('body')[0].clientHeight

}

document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');

//-->

</script>

Этот код позволит вам получить ширину и высоту области отображения в вашем браузере views. Это даст дизайнеру возможность создавать и использовать различные дисплеи в зависимости от размера окна браузера пользователя.

13. Редирект с необязательной задержкой

<script type="text/javascript">

setTimeout( "window.location.href =

'http://walkerwines.com.au/'", 5*1000 );

</script>

Этот фрагмент код позволит вам перенаправить пользователей на другую страницу, и в нем есть возможность установить задержку.

14. Обнаружение айфонов

<script type="text/javascript">

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {

    if (document.cookie.indexOf("iphone_redirect=false") == -1) {

        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";

    }

}

</script>

Этот код позволит вам определить, смотрит ли пользователь ваш сайт с iPhone или iPad.

15. Вывести сообщение в строку состояния

<script language="javascript" type="text/javascript"> 
<!-- 
   window.status = "<TYPE YOUR MESSAGE>"; 
// --> 
</script>

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

+1
2
+1
5
+1
1
+1
2
+1
2

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *