15 Бесплатный образец фрагментов JavaScript для ваших сайтов

Обновлено: 23 сентября 2019 г. / Автор статьи: WHSR Guest

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

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

JavaScrip Советы новичкам: что нужно знать?

Для начала вам нужно знать несколько основных тем:

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

Также важно понимать, что JavaScript на самом деле приведет к катастрофе при неправильном использовании.

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

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

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

Нет, я не пытаюсь отпугнуть вас этими моментами.

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

Халява: 15 Cool JavaScript Snippets для вашего сайта

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

1. Понимание видео HTML5

Быстрый пример

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

Что делает фрагмент кода JavaScript?

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

2. JavaScript Cookies

Быстрый пример

/**

* 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" : "");

}








/**

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

}








/**

* 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";

    }

}

Что делает фрагмент кода JavaScript?

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

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

Быстрый пример

var images = new Array();

function preloadImages(){

    for (i=0; i 

Что делает фрагмент кода JavaScript?

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

4. Проверка электронной почты

Быстрый пример

Глава:


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


Тело: Адрес электронной почты:

Что делает фрагмент кода JavaScript?

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

5. Нет щелчка правой кнопкой мыши

Быстрый пример

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

Что делает фрагмент кода JavaScript?

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

6. Показать случайные цитаты

Быстрый пример

Руководитель:
  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();


Тело: writeRandomQuote();

Что делает фрагмент кода JavaScript?

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

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

Быстрый пример

Предыдущая страница | Следующая Страница

Что делает фрагмент кода JavaScript?

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

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

Быстрый пример

Добавить в избранное

Что делает фрагмент кода JavaScript?

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

9. Easy Print Page Ссылка

Быстрый пример

Распечатать страницу

Что делает фрагмент кода JavaScript?

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

10. Показать форматированную дату

Быстрый пример

Руководитель:
  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);
  }


Тело: showDate();

Что делает фрагмент кода JavaScript?

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

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

Быстрый пример

Руководитель:
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);
}


Тело: addCommas("4550989023");

Что делает фрагмент кода JavaScript?

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

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

Быстрый пример

Your viewport width is '+viewportwidth+'x'+viewportheight+'');

//-->

Что делает фрагмент кода JavaScript?

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

13. Перенаправление с дополнительной задержкой

Быстрый пример

setTimeout( "window.location.href =

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

Что делает фрагмент кода JavaScript?

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

14. Определить iPhone

Образец

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

    }

}

Что делает фрагмент кода JavaScript?

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

15. Распечатать сообщение в строке состояния

Быстрый пример

 
"; 
// --> 

Что делает фрагмент кода JavaScript?

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

О ГСВР Гость

Эта статья написана гостем-автором. Представленные ниже авторские взгляды являются полностью его или ее собственными и могут не отражать взгляды ВСЖД.

Подключение: