Аналог на php
php вариант для больших кодов
Задача: написать код ротатора баннеров, который обновляется при перезагрузке страницы, закинуть на хост и подключать его на все свои сайты именно с одного хоста не передавая какие либо данные, кроме самих баннеров.
Это даст гибкость и оперативность замены или добавления новых баннеров т.к. код находится на одном хосте и не нужно заходить на каждый сайт.
Для реализации скрипта нам понадобится базовый javascript, который идет из коробки в любом клиентском браузере, т.е. ничего дополнительно подключать не нужно. Конечно, можно расширить функционал с помощью jQuery, но в этом нет острой необходимости.
Создаем javascript файл
Для начала создадим пустой *.js файл с любым именем, например, стандартное script.js и загрузим себе на хост. Я \”центром\” выбрал данный сайт, где хранятся не только код вращалки, но и все необходимые картинки для него.
Допустим мы получили прямой адрес нашего скрипта, например:
Значит код для вставки на сторонние ресурсы будет таким:
<script src="https://devarts.pro/uploads/b/banners.js"></script>
Код ротатора
var banners = [
'<a href="https://devarts.pro/9-luchshaya-pop-up-i-click-under-partnerka.html"target="_blank"><img src="https://devarts.pro/uploads/banners/popunder.png"></a>',
"<a href='https://devarts.pro/226-websurf-avtoserf-navechno.html' target='_blank'><img src='https://devarts.pro/uploads/banners/websurf.png'></a>"
];
Запись выше, если ее попытаться визуализировать представляет из себя вот такую табличку, только в данном случае заполненными будут 0 и 1 т.к. строк в коде всего две
Мы создаем переменную banners, в которой объявляем массив и сразу же заполняем его строками (баннерами). На этом и построена работа ротатора, мы будем генерировать случайное число и выводить код, соответствующий этому номеру.
Кавычки и разделение строк
В оригинале массив записывается в одну строку, но для удобства чтения и редактирования я разбил его на отдельные строки. Причем, обратите внимание на двойные и одинарные кавычки. Нет никакой разницы, какие кавычки вы используете, главное, чтобы в HTML коде они не повторялись – их нужно либо экранировать, либо сменить на противоположные. Еще два условия – баннер обязательно заканчивается запятой, кроме последнего и кусок баннера нельзя переносить на новую строку:
var banners = ['baner', "baner", 'baner'];
var banners = [
'baner',
"baner",
'baner',
'"так делать можно"',
"'и так тоже'",
""а так нельзя"",
'переносить строку(баннер)
на новую строку тоже нельзя'
];
Теперь мы генерируем случайное число от нуля, до суммы баннеров:
var rand = Math.trunc(Math.random() * (banners.length - 0) + 0);
и выводим на страницу, в том месте, где расположен вышеуказанный код баннера:
document.write(banners[rand]);
Итоговый код буде таким:
var banners = [
'Ваш код баннера',
"Ваш код баннера"
];
var rand = Math.trunc(Math.random() * (banners.length - 0) + 0);
document.write(banners[rand]);
Расширение функционала
Любому разработчику на javascript известно, что для ускорения загрузки сайта необходимо вызов скрипта опускать в конец кода перед закрывающим тегом BODY.
Для этого размещаем код в нужном месте, а в том месте, где собираетесь выводить баннеры, вставляете пустой DIV с любым классом, например:
<div class="code_block"></div>
и удаляете строку document.write(); из вашего скрипта и дабы скрипт не выводил баннер под сайтов. Далее, в зависимости от используемых методов делаем следующее:
Нативный javascript
Дописываете небольшой кусочек и получаете итоговый скрипт. Если необходимо сменить класс, то нажмите ctrl+F в редакторе и найдите его самостоятельно, это не трудно, он сразу после генерации числа 🙂
var banners = [
'Ваш код баннера',
"Ваш код баннера"
];
var rand = Math.trunc(Math.random() * (banners.length - 0) + 0);
insert = document.querySelector('.code_block');
insert.insertAdjacentHTML(afterbegin, banners[rand]);
jQuery
var banners = [
'Ваш код баннера',
"Ваш код баннера"
];
var rand = Math.trunc(Math.random() * (banners.length - 0) + 0);
$('.code_block').append(banners[rand]);
какой же ЖО.Й вы все это пишите???? на всех сайтах одно и тоже, ну почему нельзя написать?, Этот код в html страницы, это код в файл .js? этот ещё куда-то, а патом уже что-то разжовывать, где какое значение, а пока это набор букв
Потому что здесь не обучение элементарным азам кодинга. Статья подразумевает, что вы хоть как-то ориентируетесь в элементарном коде и разберетесь что и куда.
Тем более статья разжевывает очень многие вещи.
Я бы порекомендовал вам для начала посмотреть самые начальные курсы по HTML и JS которых полно в Ютубе