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

Статья написана:
  • Избранные статьи
  • Обновлено: сентябрь 23, 2019

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 для вашего сайта

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

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

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

<script type = "text / javascript"> functiondershind_video () {return !! document.createElement ('video'). canPlayType; // логический} if (!dersnds_video ()) {// Должен быть более старый браузер или IE. // Может быть сделать что-то вроде скрытия пользовательских элементов управления // HTML5. Или что угодно ... videoControls.style.display = 'none'; } </ script>

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

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

2. JavaScript Cookies

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

<script type = "text / javascript"> / ** * Устанавливает Cookie с заданным именем и значением. * * имя Имя файла cookie * значение Значение файла cookie * [истекает] Дата истечения срока действия файла cookie (по умолчанию: конец текущего сеанса) * [путь] Путь, где файл cookie действителен (по умолчанию: путь к вызывающему документу) * [ домен] Домен, в котором действителен файл cookie * (по умолчанию: домен вызывающего документа) * [безопасное] логическое значение, указывающее, требуется ли для передачи файла cookie * безопасная передача * / функция setCookie (имя, значение, срок действия, путь, домен, безопасный) {document.cookie = name + "=" + escape (value) + ((expires)? "; expires =" + expires.toGMTString (): "") + ((path)? "; path =" + path: "") + ((домен)? "; домен =" + домен: "") + ((безопасный)? "; безопасный": ""); } </ script> <script type = "text / javascript"> / ** * Получает значение указанного файла cookie. * * name Имя желаемого куки. * * Возвращает строку, содержащую значение указанного cookie, * или ноль, если cookie не существует. * / function getCookie (name) {var dc = document.cookie; var prefix = name + "="; var begin = dc.indexOf (";" + префикс); if (begin == -1) {begin = dc.indexOf (префикс); 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"> / ** * Удаляет указанный файл cookie. * * name имя файла cookie * [путь] путь файла cookie (должен совпадать с путем, используемым для создания файла cookie) * [домен] домен файла cookie (должен быть таким же, как домен, используемый для создания файла cookie) * / функция deleteCookie ( имя, путь, домен) {if (getCookie (name)) {document.cookie = name + "=" + ((путь)? "; путь =" + путь: "") + ((домен)? "; домен = "+ domain:" ") +"; expires = Чт, 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"); </ Скрипт>

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

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

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

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

Глава:

<script type = "text / javascript"> функция validateEmail (theForm) {if (/^w+([.-]?w+)*@w+([.-]?w+)*(.wabilities2,3 rout)+$ /.test(theForm.email-id.value)) {return (true); } alert («Неверный адрес электронной почты! Пожалуйста, введите снова внимательно!.»); возвращать (ложь); } </ script>

Тело: <form onSubmit = "return validateEmail (this);" action = ""> Адрес электронной почты: <input type = "text" name = "emailid" /> <input type = "submit" value = "Submit" /> <input type = "reset" value = "Reset" /> </ form>

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

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

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"); </ Скрипт>

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

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

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

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

Руководитель: <script type = "text / javascript"> writeRandomQuote = function () {var quotes = new Array (); quotes [0] = "Действие - реальная мера интеллекта."; quotes [1] = "Бейсбол обладает большим преимуществом по сравнению с крикетом, так как он быстрее закончился."; quotes [2] = «Каждая цель, каждое действие, каждая мысль, каждое чувство, испытываемое человеком, независимо от того, известно оно или нет, является попыткой повысить уровень душевного спокойствия»; quotes [3] = "Хорошая голова и хорошее сердце - это всегда грозная комбинация."; var rand = Math.floor (Math.random () * quotes.length); document.write (котировки [Rand]); } writeRandomQuote (); </ Скрипт>

Тело: <script type = "text / javascript"> writeRandomQuote (); </ script>

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

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

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

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

<a href="javascript:history.back(1)"> Предыдущая страница </a> | <a href="javascript:history.back(-1)"> Следующая страница </a>

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

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

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

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

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com', 'Your Site Name')"> Добавить в избранное </a>

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

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

9. Easy Print Page Ссылка

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

<a href="javascript:window.print();"> Распечатать страницу </a>

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

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

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

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

Руководитель: <script type = "text / javascript"> function showDate () {var d = new Date (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // месяцы начинаются с нуля var curr_year = d.getFullYear (); document.write (curr_date + "-" + curr_month + "-" + curr_year); } </ script>

Тело: <script type = "text / javascript"> showDate (); </ script>

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

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

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

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

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

Тело: <script type = "text / javascript"> addCommas ("4550989023"); </ script>

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

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

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

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

<script type = "text / javascript"> <! - var viewportwidth; var viewportheight; // браузеры, более соответствующие стандартам (mozilla / netscape / opera / IE7), используют window.innerWidth и window.innerHeight if (typeof window.innerWidth! = 'undefined') {viewportwidth = window.innerWidth, viewportheight = window.innerHeight} / / IE6 в режиме, совместимом со стандартами (то есть с допустимым типом документа в качестве первой строки в документе) иначе if (typeof document.documentElement! = 'Undefined' && typeof document.documentElement.clientWidth! = 'Undefined' && document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // более старые версии IE ('body') [0] .clientHeight} document.write ('<p> Ширина вашего окна просмотра равна' + viewportwidth + 'x' + viewportheight + '</ p>'); // -> </ script>

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

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

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

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

<script type = "text / javascript"> setTimeout ("window.location.href = 'http://walkerwines.com.au/'", 5 * 1000); </ Скрипт>

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

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

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

Образец

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

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

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

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

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

<script language = "javascript" type = "text / javascript"> <! - window.status = "<ТИПИТЬ СВОЕ СООБЩЕНИЕ>"; // -> </ script>

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

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

О ГСВР Гость

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

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