Web Мастерская Блог
Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Как установить задержку выполнения функции на JS
Недавно задавали вопрос, как придержать выполнение функции на определенное время, используя JavaScript, как это сделать, расскажу в этой теме. Для этого будем использовать функцию setTimeout, данная функция однократно выполняет помещенный в нее код по истечению заданного времени (в миллисекундах). Пример работы:
Код из примера выведет сообщение "Привет Мир!" по истечении двух секунд (
Или так:
Как я уже сказал функция setTimeout выполнит код один раз после загрузки страницы или, какого то условия, в зависимости от поставленной задачи. Если необходимо выполнять код постоянно, через определенное время, то для решения этого вопроса подходит функция setInterval, эта функция выполняет код постоянно, с заданным...
setTimeout(function() {
alert('Привет Мир!');
}, 2000);
Код из примера выведет сообщение "Привет Мир!" по истечении двух секунд (
2000
). Кстати, это же код можно написать так:
function hi() {
alert('Привет Мир!');
};
setTimeout(hi, 2000);
Или так:
function hi() {
setTimeout(function() {
alert('Привет Мир!');
}, 2000);
};
hi();
Как я уже сказал функция setTimeout выполнит код один раз после загрузки страницы или, какого то условия, в зависимости от поставленной задачи. Если необходимо выполнять код постоянно, через определенное время, то для решения этого вопроса подходит функция setInterval, эта функция выполняет код постоянно, с заданным...
- Жалоба
Удалить пробелы в начале и в конце строки на jQuery
Порой появляется необходимость удалить пробелы в начале и в конце строки, например, когда надо проверить поле формы на пустоту. Удаляются пробелы при помощи функции trim, предназначение этой функции, как раз для удаления пустого место с начала и конца строки. Делается это так:
Чтобы убедиться, что функция действительно работает, могу предложить попробовать выполнить код ниже:
Тут мы создаем переменную с пробелами в начале и в конце фразы "Библиотека jQuery". Функция alert, строчкой ниже, выведет окошко с сообщением:
Видно, что между фразой и кавычками имеются пробелы.
Дальше по коду, функция trim удаляет пробелы и отдает новое значение той же переменной.
Кстати писать функцию необходимо со знаком доллара, либо со словом jQuery (так: $.trim или так: jQuery.trim), в противном случаи, функция работать не будет и скрипт будет...
row = $.trim(row);
Чтобы убедиться, что функция действительно работает, могу предложить попробовать выполнить код ниже:
var row = ' Библиотека jQuery ';
alert('\'' + row + '\'');
row = $.trim(row);
alert('\'' + row + '\'');
Тут мы создаем переменную с пробелами в начале и в конце фразы "Библиотека jQuery". Функция alert, строчкой ниже, выведет окошко с сообщением:
' Библиотека jQuery '
Видно, что между фразой и кавычками имеются пробелы.
Дальше по коду, функция trim удаляет пробелы и отдает новое значение той же переменной.
Кстати писать функцию необходимо со знаком доллара, либо со словом jQuery (так: $.trim или так: jQuery.trim), в противном случаи, функция работать не будет и скрипт будет...
Массивы (JavaScript: Array)
Массив - это одна из разновидность объекта, чье предназначение - хранить различные значения.
Пустой массив:
Или:
Массив с четырьмя значениями:
Или:
"Вытащить" значение из массива можно так
Пример:
На экране появится окошко с именем "Виктория"....
Пустой массив:
var a = [];
Или:
var a = new Array();
Массив с четырьмя значениями:
var family = [
'Алексей',
'Виктория',
'Юлия',
'Никита'
];
Или:
var family = new Array(
'Алексей',
'Виктория',
'Юлия',
'Никита'
);
"Вытащить" значение из массива можно так
family[0]
(первое значение (Алексей)), family[1]
(второе значение (Виктория)) и так далее.
Пример:
var family = [
'Алексей',
'Виктория',
'Юлия',
'Никита'
];
alert(family[1]);
На экране появится окошко с именем "Виктория"....
Событие при потере фокуса: (JavaScript: onBlur)
Событие при потере фокуса onBlur используется, например, для проверки введенных данных в форму.
Вызов функции job:
Для примера поставлю задачу - получить строку введенную в input, удалив пробелы в начале и в конце, посчитать количество введенных символов, если символов менее трех, то вывести сообщение об нехватки символов в строке. Если символов три или более ни чего не выводить.
Решение:
Как только фокус будет потерян в input, функция начнет выполнятся....
function job() {
// Код функции выполняемый при потере фокуса
};
Вызов функции job:
<input type="text" id="input" onBlur="job();">
Для примера поставлю задачу - получить строку введенную в input, удалив пробелы в начале и в конце, посчитать количество введенных символов, если символов менее трех, то вывести сообщение об нехватки символов в строке. Если символов три или более ни чего не выводить.
Решение:
function job() {
var text = document.getElementById('input').value;
text = text.replace(/(^\s*)|(\s*)$/g, '');
if (text.length < 3) {
alert('Символов должно быть не менее трех.');
};
};
Как только фокус будет потерян в input, функция начнет выполнятся....
Динамическое обновление контента (Без перезагрузки страницы Ajax jQuery)
Потребовалось постоянное обновление одного блока страницы, без перезагрузки самой страницы, на мой взгляд лучшее решение это использовать AJAX. Вот как я сделал обновляющий блок:
В шапку сайта подключил jQuery:
Строчкой ниже написал небольшой JS:
В шаблоне странице, там, где мне нужен самообновляющийся блок добавляю DIV:
Вот и все, теперь блок работает, как и было задумано!
Что же за строки кода я такие тут нагородил?
Думаю,что про подключенный файл jquery.min.js объяснять не стоит, тут и так понятно, но если, что, то: Как подключить библиотеку jQuery. Вот дальше я создал функцию JS mode(), которая вызывает функцию $.ajax() с...
В шапку сайта подключил jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Строчкой ниже написал небольшой JS:
<script type="text/javascript">
function mode() {
$.ajax({
url: 'mode.php',
success: function(data) {
$('#display').html(data);
}
});
};
setInterval(mode, 10000);
</script>
В шаблоне странице, там, где мне нужен самообновляющийся блок добавляю DIV:
<div id="display"></div>
Вот и все, теперь блок работает, как и было задумано!
Что же за строки кода я такие тут нагородил?
Думаю,что про подключенный файл jquery.min.js объяснять не стоит, тут и так понятно, но если, что, то: Как подключить библиотеку jQuery. Вот дальше я создал функцию JS mode(), которая вызывает функцию $.ajax() с...
- Apache 6
- CMS 3
- CSS 12
- FTP 1
- HTML 10
- JavaScript 32
- MySQL 16
- Nginx 7
- PHP 41
- phpMyAdmin 2
- SVG 3
- URL 1
- XML 3
- Безопасность 4
- Библиотека JS 12
- Графика 1
- Доменное имя 1
- Инструкция 1
- Кодировка 2
- Контент 6
- Мнение 2
- Монетизация сайта 2
- Настройка 3
- Оптимизация 2
- Ошибка 7
- Поисковая система 1
- Продвижение сайта 6
- Софт 1
- Старт 2
- Функция 1
- Хостинг | Сервер 3