Главная Случайная страница


Полезное:

Как сделать разговор полезным и приятным Как сделать объемную звезду своими руками Как сделать то, что делать не хочется? Как сделать погремушку Как сделать так чтобы женщины сами знакомились с вами Как сделать идею коммерческой Как сделать хорошую растяжку ног? Как сделать наш разум здоровым? Как сделать, чтобы люди обманывали меньше Вопрос 4. Как сделать так, чтобы вас уважали и ценили? Как сделать лучше себе и другим людям Как сделать свидание интересным?


Категории:

АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника






Генерируемое содержимое

⇐ ПредыдущаяСтр 34 из 65Следующая ⇒

Генерируемое содержимое Web-страницы — это содержимое, которое не описываются в HTML-коде, а создаются программно, особым Web-сценарием. Содержимое может генерироваться как при открытии Web-страницы, так и в процессе ее просмотра, в ответ на действия посетителя.

У генерируемого содержимого есть два существенных преимущества:

  1. сокращение размера HTML-кода Web-страниц.
  2. унификация данных.

Рассмотрим небольшой пример организации генерируемого содержимого. Опишем JavaScript - функции для формирования списка и группы ссылок.

Список будет формироваться на основе следующего массива:

var items = ["listItem1","listItem2","listItem3","listItem4","listItem5","listItem6","listItem7"];

Массив содержит строки - элементы списка. На самой HTML - странице размещен тег <ol id="list">, для того, чтобы добавить элементы в список, необходимо:

  1. программно создать элемент < li >;
  2. добавить созданному элементу HTML - код содержимого;
  3. добавить элемент в список.

Программно это будет выглядеть следующим образом:

var list = document.getElementById("list");for (var i = 0; i< items.length; i++) { var listItem = document.createElement("li"); listItem.innerHTML = items[i]; list.appendChild(listItem); }

Таким образом при вызове функции сформируется содержимое списка с id="list".

Сформировать группу ссылок немногим сложнее, поскольку помимо текста ссылки, элемент <a> должен содержать адрес перехода. Для этого нам понадобится массив следующего вида:

var links = []; links[0] = {name: "first", href: "document1.html"}; links[1] = {name: "second", href: "document2.html"}; links[2] = {name: "third", href: "document3.html"}; links[3] = {name: "fourth", href: "document4.html"};

На HTML - странице определен контейнер <div id=" navigation ">. Последовательность добавления ссылки в контейнер выглядит так:

  1. программное создание элемента <a>;
  2. задание текста ссылки;
  3. задание значения атрибута href;
  4. добавление ссылки в контейнер.

Следующий код иллюстрирует программную реализацию указанной последовательности действий:

var nav = document.getElementById("navigation"); for(var j = 0; j<links.length; j++) { var linkItem = document.createElement("a"); linkItem.innerText = links[j].name+" "; linkItem.setAttribute('href', links[j].href); nav.appendChild(linkItem); }

Разумеется генерировать содержимое можно не только на основе массивов, в рамках последующих практических занятий мы рассмотрим пример формирования содержимого различных элементов на основе использования хранилищ данных.


⇐ Предыдущая29303132333435363738Следующая ⇒





Date: 2015-07-22; view: 525; Нарушение авторских прав


mydocx.ru - 2015-2024 year. (0.005 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию