Примеры фрагментов кода 15 Cool JavaScript

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

Краткая информация о JavaScript

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

Что такое JavaScript?

Есть старый клип YouTube, который хорошо отвечает на вопрос. Вот оно.

Советы для начинающих: что вам нужно знать?

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

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

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

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

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

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

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

Фрагмент JavaScript

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

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

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

<script type="text/javascript">

functiondersnds_video () {
return !! document.createElement ('video'). canPlayType; // логическое значение
}

if (! понимает_видео ()) {
// Должен быть более старый браузер или IE.
// Может быть сделать что-то вроде скрыть пользовательский
// Управление HTML5. Или что угодно ...
videoControls.style.display = 'none';
}

</ Скрипт>

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

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

JavaScript Cookies

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

<script type="text/javascript">

/ **

* Устанавливает Cookie с заданным именем и значением.

*

* имя Имя файла cookie

* значение Значение файла cookie

* [истекает] Дата истечения срока действия файла cookie (по умолчанию: конец текущего сеанса)

* [путь] Путь, где файл cookie действителен (по умолчанию: путь к вызову документа)

* [домен] Домен, в котором действителен файл cookie

* (по умолчанию: домен вызывающего документа)

* [secure] Логическое значение, указывающее, требует ли передача файлов cookie

* безопасная передача

*/

функция setCookie (имя, значение, срок действия, путь, домен, безопасность) {

document.cookie = name + "=" + escape (значение) +

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

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

((домен)? "; domain =" + domain: "") +

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

}

</ Скрипт>

<script type="text/javascript">

/ **

* Возвращает значение указанного файла cookie.

*

* name Имя желаемого файла cookie.

*

* Возвращает строку, содержащую значение указанного cookie,

* или null, если cookie не существует.

*/

функция getCookie (name) {

var dc = document.cookie;

var prefix = name + "=";

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

if (begin == -1) {

begin = dc.indexOf (префикс);

if (begin! = 0) возвращает null;

} Еще {

begin + = 2;

}

var end = document.cookie.indexOf (";", начало);

if (end == -1) {

end = dc.length;

}

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

}

</ Скрипт>

<script type="text/javascript">

/ **

* Удаляет указанный файл cookie.

*

* имя файла cookie

* путь [путь] к файлу cookie (должен быть таким же, как путь, используемый для создания файла cookie)

* домен [домен] файла cookie (должен быть таким же, как домен, используемый для создания файла cookie)

*/

функция deleteCookie (имя, путь, домен) {

if (getCookie (name)) {

document.cookie = name + "=" +

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

((домен)? "; domain =" + domain: "") +

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

}

}

</ Скрипт>

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

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

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

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

<script type="text/javascript">

var images = new Array ();

функция preloadImages () {

для (i = 0; i <preloadImages.arguments.length; i ++) {

images [i] = new Image ();

изображения [i] .src = preloadImages.arguments [i];

}

}

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

</ Скрипт>

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

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

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

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

Глава:

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

Тело:

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

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

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

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

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

<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;
}
еще {
document.onmouseup = f2;
document.oncontextmenu = f1;
}
document.oncontextmenu = new function ("return false");
</ Скрипт>

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

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

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

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

Руководитель:

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

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

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

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

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

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

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

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

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

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

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

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

Простая ссылка на страницу печати

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

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

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

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

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

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

Руководитель:

<script type="text/javascript">
function showDate () {
var d = новая дата ();
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 type = "text / javascript"> showDate (); </ script>

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

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

Сепаратор запятой

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

Руководитель:

<script type="text/javascript">
function addCommas (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 type = "text / javascript"> addCommas ("4550989023"); </ script>

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

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

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

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

<script type="text/javascript">

<! -

var viewwidthwidth;

var viewheetheight;

// более совместимые со стандартами браузеры (mozilla / netscape / opera / IE7) используют window.innerWidth и window.innerHeight

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

{

viewportwidth = window.innerWidth,

viewportheight = window.innerHeight

}

// IE6 в стандартном режиме (т. Е. С допустимым doctype в качестве первой строки в документе)

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

&& typeof document.documentElement.clientWidth! =

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

{

viewportwidth = document.documentElement.clientWidth,

viewportheight = document.documentElement.clientHeight

}

// более старые версии IE

еще

{

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

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

}

document.write ('<p> Ширина вашего видового экрана равна' + viewportwidth + 'x' + viewportheight + '</ p>');

// ->

</ Скрипт>

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

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

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

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

<script type="text/javascript">

setTimeout ("window.location.href =

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

</ Скрипт>

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

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

Определить 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";

}

}

</ Скрипт>

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

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

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

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

<script language = "javascript" type = "text / javascript">
<! -
window.status = "<ТИП ВАШЕ СООБЩЕНИЕ>";
/ / ->
</ Скрипт>

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

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

Статья от WHSR Гость

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

Присоединиться: