Blog. Just Blog

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

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

Использование HTML-комментариев для хранения данных

16.10.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Как-то меня посетила мысль проверить, как определяются HTML-комментарии в DOM-структуре документа, и как можно получить доступ к их содержимому. Ведь по сути они являются полноправными составляющими документа. Напрямую, через ID, имя и другими подобными способами, естественно, сделать это не получится, т.к. тег комментария не имеет ничего подобного. Но сделать это все-таки удалось, привязавшись к соседнему тегу одного уровня с нужным комментарием. После этого элемент комментария со всеми потрохами можно получить через функцию JavaScript nextSibling или previousSibling, в зависимости от вашей ситуации. Это можно посмотреть, например, вот на таком фрагменте кода:
  1. <div>
  2. <!--first comment--><div id="main_div">Main DIV</div><!--second comment-->
  3. </div>
  4.  
  5. <script type="text/javascript">
  6. // Получить опорный элемент
  7. var el=document.getElementById('main_div');
  8. // Сообщение "first comment"
  9. alert(el.previousSibling.nodeValue);
  10. // Сообщение "second comment"
  11. alert(el.nextSibling.nodeValue);
  12. </script>
Можно, конечно, перебрать все дочерние элементы документа, начиная от корневого, но описанным выше способом удобнее выбрать именно нужный комментарий. Способ с перебором элементов тоже приведу:
  1. <div id="overall">
  2.   <a href="#">link</a>
  3.   <!--first comment-->
  4.   <div id="inner_div">
  5.      inner div
  6.      <!--second comment-->
  7.   </div>
  8.   plain text
  9. </div>
  10.  
  11. <script type="text/javascript">
  12. var el=document.getElementById('overall');
  13. for (var 0el.childNodes.lengthi++) {
  14.   if (el.childNodes[i]=='[object Comment]' ||
  15.       el.childNodes[i]=='[object HTMLCommentElement]') {
  16.     alert(el.childNodes[i].nodeValue);
  17.   }
  18. }
  19. </script>
Последовательно перебираются все дочерние элементы, если текущий объект имеет тип [object Comment] или [object HTMLCommentElement] (в случае Internet Explorer), то значит найден комментарий. Несмотря на некоторые неудобства, способ с обходом дерева DOM тоже можно использовать, когда привязка к строго определенным элементам не требуется, а надо просто получить содержимое комментариев.

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

Исследование защиты программы JavaScript Scrambler

19.08.2010 | Категория: Темная сторона Силы | Автор: ManHunter

Скриншот программы JavaScript Scrambler

Читаю сейчас умную книжку по JavaScript, в одной из глав наткнулся на описание якобы крутой программы для защиты исходных кодов JavaScript от всяких посягательств. И там же было сказано, что программа еще и платная. Речь идет о JavaScript Scrambler. Не знаю что мне захотелось больше: поковыряться внутри самой программы или в результатах ее работы. Так что придется воплощать в жизнь оба желания.

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

Стилизация checkbox с использованием CSS и JavaScript

11.08.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
В некоторых случаях при верстке макетов сайтов возникает необходимость нестандартной стилизации различных полей ввода HTML-форм. Например, дизайнер в фотошопе слепил красивый шаблон с вычурными графическими элементами, макет утвержден и заказчик слышать ничего не хочет про "стандартные элементы управления". Оформить поля ввода и всякие кнопочки еще не проблема, а вот с элементом checkbox уже сложнее. Мало того, что каждый браузер его отрисовывает по-своему, так еще визуально у него поменять ничего нельзя. Для решения проблемы можно воспользоваться следующим хитрым трюком: checkbox помещается внутрь контейнера, например div, после этого сам checkbox визуально скрывается путем установки ему 100% прозрачности, а у контейнера меняется стиль в зависимости от состояния "галочки" в checkbox.
  1. <style type="text/css">
  2. /* Стиль для обертки отмеченного checkbox'а */
  3. div.boxChecked {
  4.     backgroundurl("checkbox.gif"no-repeat 0 3px;
  5. }
  6. /* Стиль для обертки неотмеченного checkbox'а */
  7. div.boxUnchecked {
  8.     backgroundurl("checkbox.gif"no-repeat 0 -18px;
  9. }
  10. /* Прозрачный стиль для checkbox'а */
  11. div.boxChecked inputdiv.boxUnchecked input {
  12.     cursorpointer;
  13.     margin0px;
  14.     padding0px;
  15.     width16px;
  16.     opacity0;
  17.     -moz-opacity0;
  18.     -khtml-opacity0;
  19.     filterprogid:DXImageTransform.Microsoft.Alpha(opacity=0);
  20. }
  21. </style>
Для фона отмеченного и неотмеченного checkbox'а используется одно и то же цельное изображение, только оно сдвинуто по вертикали для различных положений. Это позволяет менять фон без дополнительной загрузки новых изображений и связанного с этим неприятного моргания. Кроссбраузерный стиль checkbox'а устанавливает для него полную прозрачность. К сожалению, специфические определения стиля типа -moz-opacity, -khtml-opacity и filter не соответствуют спецификации CSS, поэтому, если вы хотите добиться полного прохождения валидатора, то придется извернуться с JavaScript.

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

Динамическое добавление скриптов на web-страницу

16.06.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Современные динамические интерфейсы web-страниц подразумевают не только изменение содержимого различных тегов, но и динамическую подгрузку скриптов JavaScript с их последующим выполнением. Например, получение скриптов или данных для них через AJAX. Способы передачи данных я тут рассматривать не буду, а расскажу о том, как динамически добавить скрипт на сформированную web-страницу и затем выполнить его. Это можно сделать как минимум двумя способами. Первый способ - добавление скрипта средствами JavaScript с использованием стандартной функции eval. Она получает в качестве аргумента строку и, рассматривая ее содержимое как код JavaScript, пытается выполнить. Например:
  1. <script type="text/javascript">
  2. eval('function do_my_job(txt) { alert(txt); }');
  3. do_my_job('ok');
  4. </script>
Второй способ, более корректный, - это добавление скриптов через DOM. При этом создается новый объект script, заполняется его тип и текст, а затем созданный объект добавляется в качестве дочернего элемента к элементу head. В этом случае добавленный скрипт будет сразу же выполнен. Для удобства я написал небольшую функцию, получающую в качестве аргумента текст скрипта, и добавляющую его на страницу.
  1. <script type="text/javascript">
  2. function add_script(txt) {
  3.     var newScript document.createElement("script");
  4.     newScript.type "text/javascript";
  5.     newScript.text txt;
  6.     document.getElementsByTagName('head')[0].appendChild(newScript);
  7. }
  8. </script>
Во всех тестовых браузерах (IE 5.5-8, Opera 7-10, Firefox 2-3, Chrome, Safari и т.д.) скрипт выполнялся также при добавлении его к элементу body. Опытным путем установлено, что скрипт срабатывает при добавлении и к другим элементам страницы, но лучше, наверное, так не делать для сохранения кроссбраузерности и совместимости.

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

Обработка недоступных картинок на сайте

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

Обработка недоступных картинок на сайте

Одно из неприятных явлений в Интернете - это "битые" ссылки, в частности ссылки на картинки. Сайты могут закрываться, переезжать, менять свою структуру, это естественный процесс. Хуже, когда от этого страдает ваш сайт. Если на сайте всего несколько страниц, то "битые" картинки вы сможете легко отследить самостоятельно, а о некоторых могут сообщить ваши посетители. Но если страниц много, то в большинстве случаев "битые" картинки могут висеть незамеченными достаточно долго. На своем хостинге их, в принципе, можно отследить по появлению ссылок в логе ошибок 404 (страница не найдена), а если изображения находятся на другом сервере?

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

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