Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Как скопировать массив на JavaScript

29.05.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
При программировании на JavaScript иногда требуется создать копию массива. Но особенность заключается в том, что в JavaScript массив является объектом, поэтому при использовании оператора присваивания, новой копии создаваться не будет, а просто будет создана ссылка на существующий массив. Если после этого попробовать внести какие-нибудь изменения в любой из этих массивов, то изменения будут внесены сразу в оба. Так получается, потому что фактически это один и тот же объект. Например:
  1. // Как хочется сделать, но не получится
  2. var old_array = ['one''two''three'];
  3. var new_array old_array;
  4.  
  5. // Добавляем по одному элементу в исходный и "новый" массив
  6. old_array.push('banana');
  7. new_array.push('lemon');
  8.  
  9. // Получается вот что
  10. // old_array = ['one', 'two', 'three', 'banana', 'lemon'];
  11. // new_array = ['one', 'two', 'three', 'banana', 'lemon'];
Как видите, несмотря на то, что мы пытались добавить элементы в разные массивы (как нам казалось), они добавились в оба. Чтобы создавать не ссылку, а копию, можно воспользоваться хитрым трюком с методом slice. В этом случае будет создана именно копия массива.
  1. // Корректный вариант решения
  2. var old_array = ['one''two''three'];
  3. var new_array old_array.slice(0);
  4.  
  5. // Добавляем по одному элементу в исходный и новый массив
  6. old_array.push('banana');
  7. new_array.push('lemon');
  8.  
  9. // Теперь все правильно
  10. // old_array = ['one', 'two', 'three', 'banana'];
  11. // new_array = ['one', 'two', 'three', 'lemon'];
Надеюсь, что этот совет вам где-нибудь пригодится и поможет избежать хитрых ошибок, которые достаточно сложно отловить.

Просмотров: 4767 | Комментариев: 6

Горизонтальное меню с вкладками на CSS и JavaScript

27.04.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Сегодня мы будем делать горизонтальное меню с вкладками для размещения на сайте. Но это не обычное навигационное меню, оно делается немного иначе, это меню для отображения различных блоков информации без перехода на другие страницы. Такое горизонтальное меню используется, например, в интернет-мгазинах, когда на одной странице представлено описание товара, фотографии, какие-нибудь дополнительные характеристики, отзывы посетителей и т.д., и вся эта информация переключается как раз таким меню с вкладками.

Начнем с проектирования. Нам надо создать в HTML-коде меню с названиями вкладок и блоки с содержимым, которые соответствуют той или иной выбранной вкладке.
  1. <!-- меню с вкладками -->
  2. <ul id="menu">
  3.   <li id="goods">Товар</li>
  4.   <li id="descr">Описание</li>
  5.   <li id="foto">Фотография</li>
  6.   <li id="price">Цена</li>
  7.   <li id="shops">Где купить</li>
  8. </ul>
  9.  
  10. <!-- контейнер со страницами -->
  11. <div id="container">
  12.   <div id="goods_content">Товар</div>
  13.   <div id="price_content">Цена на товар</div>
  14.   <div id="shops_content">Адреса магазинов</div>
  15.   <div id="descr_content">Описание</div>
  16.   <div id="foto_content">Фотографии</div>
  17. </div>
Связь между вкладками и блоками с содержимым выполняется через их атрибут id, для связанных блоков этот атрибут формируется из id вкладки путем добавления к нему строки "_content". Такой способ позволяет размещать блоки с контентом в произвольном порядке, независимо от порядка следования вкладок.

Читать статью целиком »
Просмотров: 16656 | Комментариев: 15

Загрузка видимых изображений (Lazy Load) на JavaScript

06.08.2012 | Категория: Web-мастеру и не только | Автор: ManHunter

Загрузка видимых изображений (Lazy Load) на JavaScript

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

Читать статью целиком »
Просмотров: 16727 | Комментариев: 12

Защита контента сайта от копирования

05.07.2012 | Категория: Web-мастеру и не только | Автор: ManHunter
Сразу же оговорюсь, что я категорически против использования на практике любых методов, описываемых в этой статье. Любой запрет только раздражает посетителей сайта и вряд ли кто-то захочет вернуться снова на страницу, которая, например, блокирует правую кнопку мышки или требует для просмотра текста включенный JavaScript. Максимум, что я признаю, это пассивная защита контента. Это не говоря о том, что любую защиту в случае реальной необходимости можно без особых проблем обойти. Но тем не менее, активная защита от копирования контента иногда встречается на некоторых сайтах. В этой статье я собрал методы активной защиты, которые встречал на практике.

Первый способ, самый простой. Подавление событий выделения текста, движения и клика мышкой, копирования и вызова контекстного меню путем блокировки правой кнопки мыши. Ставится обработчик, который не дает событию всплывать по иерархии DOM и сразу же возвращает флажок отмены:
  1. function nocopy(event) {
  2.     var event event || window.event;
  3.     if (event.preventDefault) { event.preventDefault(); }
  4.     else { event.returnValue false; }
  5.     return false;
  6. }
  7.  
  8. document.onmousedown nocopy;
  9. document.onmouseup nocopy;
  10. document.onmousemove nocopy;
  11. document.ondragstart nocopy;
  12. document.onselectstart nocopy;
  13. document.ontextmenu nocopy;
  14. document.oncopy nocopy;
Способ кроссбраузерный, но, к счастью, прекрасно обходится через выделение всего текста клавишами Ctrl+A и последующего его копирования. В Firefox через настройки обходится защита от блокировки контекстного меню.

Читать статью целиком »
Просмотров: 23683 | Комментариев: 27

Новый алгоритм получения Google PageRank

11.10.2011 | Категория: Web-мастеру и не только | Автор: ManHunter
Буквально на днях Google поменял алгоритм, по которому генерировалась ссылка для получения показателей Google PageRank. В результате этого отвалились многие сервисы, вспомогательные программы, сторонние тулбары, счетчики и еще бессчетное количество сеошного барахла. Мне было бы глубоко фиолетово на их проблемы, но у меня на сайте тоже используется система автоматического съема значений Google PR. Поэтому пришлось быстренько адаптироваться к новым условиям. Я установил себе гугловский тулбар, быстренько выпотрошил его и получил алгоритм генерации ссылки для получения Google PageRank. Вот как он выглядит на JavaScript:
  1. <script type="text/javascript">
  2.  
  3. // Программисты Google явно с юмором :)
  4. var HASH_SEED "Mining PageRank is AGAINST GOOGLE'S TERMS OF SERVICE. "+
  5.                  "Yes, I'm talking to you, scammer.";
  6.  
  7. // Расчет хэша строки запроса
  8. awesomeHash = function(a) {
  9.     var 16909125;
  10.     for (0a.lengthc++) {
  11.         b ^= HASH_SEED.charCodeAt(HASH_SEED.length) ^ a.charCodeAt(c);
  12.         b >>> 23 << 9;
  13.     }    
  14.     return '8'+hexEncodeU32(b);
  15. };
  16.  
  17. // Перевод числа в HEX-значение
  18. hexEncodeU32 = function(a) {
  19.     var toHex8(>>> 24);
  20.     b += toHex8(>>> 16 255);
  21.     b += toHex8(>>> 255);
  22.     return toHex8(255)
  23. };
  24. toHex8 = function(a) {
  25.     return (16 "0""") + a.toString(16)
  26. };
  27.  
  28. // Функция получения ссылки для запроса Google PR
  29. getPageRankLink = function(a) {
  30.     return 'http://toolbarqueries.google.ru/tbr?features=Rank'+
  31.            '&client=navclient-auto-ff&ch='+awesomeHash(a)+'&q=info:'+
  32.            encodeURIComponent(a);
  33. }
  34. </script>
Функция вызывается следующим образом. На входе подается ссылка на страницу, для которой требуется рассчитать Google PageRank, на выходе получаем ссылку, по которой можно узнать результат.
  1. <script type="text/javascript">
  2.  
  3. // Пример использования
  4. st='http://www.manhunter.ru/'
  5. alert(getPageRankLink(st));
  6.  
  7. </script>
Результат запроса к гугловскому серверу возвращается в виде строки, например, "Rank_1:1:2". Последняя цифра и есть искомое значение рейтинга страницы. Алгоритм можно без особого труда перевести на другие языки программирования.

Читать статью целиком »
Просмотров: 7246 | Комментариев: 12

Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2025
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 3 (0.0041 сек.) / Память: 4.5 Mb
Наверх