JavaScript » Web Мастерская | Блог

Блог

Web Мастерская

Как подключить highlight.js (Подсветка синтаксиса)

Подключить highlight.js на сайте довольно просто, для этого переходим на сайт: https://highlightjs.org/ выбираем все языки, которые необходимо посветить на вашем сайте и скачиваем архив (https://highlightjs.org/download/).
Распаковываем архим, файл highlight.pack.js и один из файлов стиля (css) помещаем на вашем сайте, далее между тегами <head> и </head> подключаем файл highlight.pack.js, прописывая:

<script type="text/javascript" src="js/highlight.pack.js"></script>

И файл стиля, например vs.css:

<link rel="stylesheet" href="css/vs.css" />

Еще один код, который надо вставить между тегами <head> и </head>:

<script type="text/javascript">
    hljs.initHighlightingOnLoad();
</script>

Теперь тот код, что надо подсветить помещаем между тегами:

<pre><code>
    <!-- Тут код, который необходимо подсветить -->
</code></pre>

Вот и всё!

Спасибо за внимание!...

Жалоба

Удалить пробелы в начале и в конце строки на jQuery

JavaScript Библиотека JS

Порой появляется необходимость удалить пробелы в начале и в конце строки, например, когда надо проверить поле формы на пустоту. Удаляются пробелы при помощи функции trim, предназначение этой функции, как раз для удаления пустого место с начала и конца строки. Делается это так:

row = $.trim(row);

Чтобы убедиться, что функция действительно работает, могу предложить попробовать выполнить код ниже:

var row = ' Библиотека jQuery      ';
alert('\'' + row + '\'');
row = $.trim(row);
alert('\'' + row + '\'');

Тут мы создаем переменную с пробелами в начале и в конце фразы "Библиотека jQuery". Функция alert, строчкой ниже, выведет окошко с сообщением:

' Библиотека jQuery '

Видно, что между фразой и кавычками имеются пробелы.
Дальше по коду, функция trim удаляет пробелы и отдает новое значение той же переменной.
Кстати писать функцию необходимо со знаком доллара, либо со словом jQuery (так: $.trim или так: jQuery.trim), в противном случаи, функция работать не будет и скрипт будет...

Жалоба

Массивы (JavaScript: Array)

JavaScript

Массив - это одна из разновидность объекта, чье предназначение - хранить различные значения.

Пустой массив:

var a = [];

Или:

var a = new Array();

Массив с четырьмя значениями:

var family = [
    'Алексей',
    'Виктория',
    'Юлия',
    'Никита'
];

Или:

var family = new Array(
    'Алексей',
    'Виктория',
    'Юлия',
    'Никита'
);

"Вытащить" значение из массива можно так family[0] (первое значение (Алексей)), family[1] (второе значение (Виктория)) и так далее.
Пример:

var family = [
    'Алексей',
    'Виктория',
    'Юлия',
    'Никита'
];
alert(family[1]);

На экране появится окошко с именем "Виктория"....

Жалоба

Событие при потере фокуса: (JavaScript: onBlur)

JavaScript

Событие при потере фокуса onBlur используется, например, для проверки введенных данных в форму.

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)

JavaScript Библиотека JS Контент

Потребовалось постоянное обновление одного блока страницы, без перезагрузки самой страницы, на мой взгляд лучшее решение это использовать 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() с...

Жалоба

1 комментарий