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

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.

Определить страну и город на JS + API Яндекс

Для того, что бы определить страну и город на JS + API Яндекс, подключаем между тегами <head> и </head> jQuery и API Яндекс, например так:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>

Далее пишем код, который будет забивать название страны и города в переменные и передавать их в блоки для вывода на экран:
<script type="text/javascript">
    $(document).ready(function() {
        ymaps.ready(function() {
            var country = ymaps.geolocation.country;
            var city = ymaps.geolocation.city;
            
            $('#country').html('Выша страна ' + country);            
            $('#city').html('Выша город ' + city);
        });
    });
</script>

Теперь в нужной части страницы вставляем:
<!-- Для вывода страны -->
<div id="country"></div>

<!-- Для вывода города
...

Как подключить 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

Порой появляется необходимость удалить пробелы в начале и в конце строки, например, когда надо проверить поле формы на пустоту. Удаляются пробелы при помощи функции 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 используется, например, для проверки введенных данных в форму.
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, функция начнет выполнятся....