Создание и изменение HTML

Введение

В этой лекции рассматриваются основы использования JavaScript для управления контентом страницы, включая отображение и скрытие частей страницы, добавление нового кода HTML и его удаление. В конце вы поймете, что наиболее фундаментальной вещью, для чего используется JavaScript, является изменение контента страницы, и вы узнаете, как лучше всего это делать.

Лекция имеет следующее содержание:

• Скрытие и отображение
  • Пример скрытия и отображения
    • Регулярные выражения
    • Соединение работающего кода со страницей
• Создание HTML
• Заключение
• Контрольные вопросы

Скрытие и отображение

Легче всего начать с управления кодом HTML, который уже имеется, скрывая или отображая элементы, которые находятся на странице. Для этого можно использовать JavaScript, который позволяет изменять стили элементов. Стили CSS уже являются мощным средством описания внешнего вида элемента, и одной из составляющих того, как выглядит элемент, является вопрос, отображается ли элемент вообще. Свойство CSS display является ключом для отображения и скрытия элемента: если задать его как display:none;, элемент будет скрыт. Представьте параграф следующего вида:

<p id="mypara" style="display: none">I am a paragraph</p>

Этот параграф будет невидим на странице. JavaScript позволяет динамически добавлять стиль display: none для элемента и удалять его.

JavaScript предоставляет возможность получить ссылку на элемент HTML. Например, var el = document.getElementById("nav"); выдает ссылку на элемент с id="nav". Когда ссылка на элемент получена, можно с помощью атрибута style изменить примененный к нему код CSS. Например, параграф "mypara" выше в настоящий момент скрыт (в нем задано display: none ). Чтобы показать его, задайте атрибут стиля display как block:

var el = document.getElementById('mypara');
el.style.display = 'block';

И вот, параграф появился. Задание CSS на элементе через атрибут style делает то же самое, что задание его в атрибуте style в самом HTML, поэтому код выше, задающий el.style.display = 'block', добивается того же эффекта, что и размещение style="display: block" прямо в коде HTML. За исключением того, что он является динамическим. Скрытие любого элемента также просто:

var el = document.getElementById('mypara');
el.style.display = 'none';

Пример скрытия и отображения

С теорией все хорошо, но здесь может быть полезен более практический пример. Представьте множество вкладок, где щелчок на самой вкладке показывает ее и скрывает все остальные.

Вот пример множества вкладок:

<ol class="tablinks">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ol>

<div class="tab" id="tab1">This is tab 1</div>
<div class="tab" id="tab2">This is tab 2</div>
<div class="tab" id="tab3">This is tab 3</div>

В разделе head файла примера (см. действующий пример tabs.html по адресу http://dev.opera.com/articles/view/creating-and-modifying-html/tabs.html), вы найдете следующий код CSS и JavaScript (который будет обычно помещаться во внешние файлы и импортироваться в HTML, но здесь все содержится в одном файле, чтобы упростить просмотр). Часть кода выглядит устрашающе; не беспокойтесь, мы рассмотрим это.

<style type="text/css">
ol.tablinks {
  margin: 0; padding: 0;
}
ol.tablinks li {
  float: left;
  border: 2px solid red;
  border-width: 2px 2px 0 2px;
  background: #eee;
  list-style: none;
  padding: 5px;
  margin: 0;
}
ol.tablinks li a {
  text-decoration: none;
  color: black;
}
div.tab {
  clear: left;
  border: 2px solid red;
  border-width: 1px 2px 2px 2px;
}
</style>

<script type="text/javascript">
var tabify = {
  hasClass: function(el,c) {
    return el.className.match(new RegExp('(\\s|^)'+c+'(\\s|$)'));        
  },
  addClass: function(el,c) {
    if (!tabify.hasClass(el,c)) el.className += " " + c;
  },
  removeClass: function(el,c) {
    if (tabify.hasClass(el,c)) {
      el.className=el.className.replace(new RegExp('(\\s|^)'+c+'(\\s|$)'),' ');
    }
  },
  hideAllTabs: function(ol) {
    var links = ol.getElementsByTagName("a");
    for (var i=0; i<links.length; i++) {
      tabify.setTabFromLink(links[i], "none");
   }
  },
  setTabFromLink: function(link, style) {
    var dest = link.href.match(/#(.*)$/)[1];
    document.getElementById(dest).style.display = style;
    if (style == "none") {
        tabify.removeClass(link, "active");
    } else {
        tabify.addClass(link, "active");
    }
  },
  addEvent: function(obj, type, fn) {
    if ( obj.attachEvent ) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
      obj.attachEvent('on'+type, obj[type+fn] );
    } else {
      obj.addEventListener( type, fn, false );
    }
  },  
  init: function() {
    var ols = document.getElementsByTagName("ol");
    for (var i=0; i<ols.length; i++) {
      var ol = ols[i];
      if (!/(^|\s)tablinks(\s|$)/.test(ol.className)) { continue; }
      tabify.addEvent(ol, "click", function(e) {
        var target = window.event ? window.event.srcElement : e.target;
        if (target.nodeName.toLowerCase() === "a") {
          tabify.hideAllTabs(e.target.parentNode.parentNode);
          tabify.setTabFromLink(e.target, "block");
          if (e) e.preventDefault();
          if (window.event) window.event.returnValue = false;
          return false;
        }
      }, true);
      tabify.hideAllTabs(ol);
      tabify.setTabFromLink(ol.getElementsByTagName("a")[0], "block");
    }
  }
};
tabify.addEvent(window, "load", tabify.init);
</script>

Каждая вкладка является ссылкой. Каждая ссылка содержит обработчик событий onclick. Этот обработчик событий делает две вещи: он скрывает все div (используя подход display: none, показанный выше), а затем показывает div, соответствующий этой вкладке, задавая style этого div как display: block.

Можно видеть, что код HTML задан таким образом, чтобы все работало даже в отсутствие сценария, хотя щелчок на ссылке не показывает и не скрывает вкладку, ссылки переходят на соответствующую вкладку, поэтому страница по-прежнему действует корректно, и имеет семантический смысл даже в браузерах без JavaScript. Это важно: такая техника часто называется "постепенным улучшением" (или несколько лет назад называлась "постепенное снижение эффективности", но больше так не говорят). Это важно не только для людей, которые используют современный браузер, но с отключенным JavaScript, но и для множества других типов пользователей. Вспомогательные технологии, такие как считыватели экрана для слепых пользователей, существенно полагаются на то, что структура HTML будет семантической и содержательной, и их поддержка для усовершенствований JavaScript не такая хорошая, как для зрячих пользователей. Мобильные браузеры также обладают не очень большой поддержкой сценариев. Процессоры поиска считывают HTML, но не сценарий - можно сказать, что Google является самым ненасытным слепым пользователем браузера. Вот в чем состоит значение термина "последовательное улучшение": начните со страницы, которая имеет смысл, и отобразите ее содержимое в самой простой рабочей среде, такой как web-браузер с поддержкой только текста, а затем постепенно добавляйте к ней дополнительные функции, так чтобы на каждом шаге этого пути сайт оставался по-прежнему пригодным к употреблению и функциональным.

Весь код JavaScript в основном присутствует в двух частях: часть, которая фактически делает работу, и часть, которая соединяет ее с HTML. Код, который фактически делает работу в этом примере, достаточно тривиален:

отображение вкладки, соответствующей определенной ссылке, с помощью двух строчек кода JavaScript:

var dest = link.href.match(/#(.*)$/)[1];
document.getElementById(dest).style.display = "block";

Ссылки, если вы помните, выглядят следующим образом <a href="#tab1">Tab 1</a>, и поэтому первая строка использует регулярное выражение (см. Примечание ниже) для извлечения той части ссылки, которая появится после символа # ; в данном примере это будет строка tab1. Эта часть ссылки будет такой же как ID соответствующего div (потому что, как упоминалось, страница создается таким образом, чтобы иметь семантический смысл, поэтому "вкладка" ссылается на свой div ). Затем мы извлекаем ссылку на этот div с помощью document.getElementById, и задаем style.display как block, как было показано ранее.