Создание динамического содержания

Автор: Пользователь скрыл имя, 26 Октября 2013 в 19:56, курсовая работа

Краткое описание

Вся курсовая работа состоит из трех файлов:
 Jscode- файл сценария JSkript
 Samples- таблица стилей
 Курсовик-документ HTML
Jscode содержит в себе непосредственно javaScript, который и формирует содержание. При подключении к любому HTML документу данного Jscript`a будет автоматически формироваться содержание и создавать иерархический список с расширением в глубину.
Таблица стилей (Samples) содержит в себе перечень стилей (типов заголовков), из которых следует формировать содержание.
Последний файл представляет собой пример выполнения данного jscripta.
Рассмотрим подробнее каждый из файлов.

Файлы: 1 файл

отчет по курсовой работе.doc

— 301.00 Кб (Скачать)

ст

Курсовая работа по «Объектно-ориентированному программированию»

Создание динамического содержания.

Выполнила: ст. группы И-9-15 Щербакова А.Н.

Проверил: Платонов В.Л.

Москва 2004 год

Содержание:

Теория

Термин динамическое содержание (dynamic contents) подразумевает возможность доступа и изменения части содержания документа без необходимости загрузки или создания новой страницы. Хорошим примером динамического содержания являются электронные часы, которые автоматически обновляются в HTML-документе каждую секунду без необходимости генерации нового документа.

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

Реализация

Вся курсовая работа состоит из трех файлов:

Jscode- файл сценария JSkript
Samples- таблица стилей
Курсовик-документ HTML

Jscode содержит в себе непосредственно javaScript, который и формирует содержание. При подключении к любому HTML документу данного Jscript`a будет автоматически формироваться содержание и создавать иерархический список с расширением в глубину.

Таблица стилей (Samples) содержит в себе перечень стилей (типов заголовков), из которых следует формировать содержание.

Последний файл представляет собой пример выполнения данного jscripta.

Рассмотрим подробнее каждый из файлов:

Файл сценария JSkript

Рассмотрим код данного файла.

//Переменная для таблицы содержания

var sod = null;

function createcontent() {

var levels = new Object;

var level = 0; //текущий уровень =0

if (window.parent != self)

if (null != parent.menu)

sod = parent.menu;

if (null == sod)

sod = window.open("", "Index", "width=400; height=550; "); // создаем окно без открытия в нем файла (1 параметр) и имя окна Index (2 параметр)

sod.document.open();// открываю внутри окна документ и вводим туда информацию

sod.document.write("<HTML>");

sod.document.writeln("<TITLE>Содержание</TITLE>");

// Запись обработчика события нажатие кнопки для прокручивания элементов в окне

sod.document.writeln("<SCRIPT> function gotoHeader()" +

"{if (event.srcElement.linkTo != null)" +

"event.srcElement.linkTo.scrollIntoView(true)} </" +

"SCRIPT>");

sod.document.writeln("<BODY ONCLICK='gotoHeader()'" +

"STYLE='cursor:hand'" +

"onmouseover='if (event.srcElement.tagName ==" +

""SPAN")" +

"event.srcElement.style.textDecorationUnderline " +

"= true' onmouseout = " +

"'event.srcElement.style.textDecorationUnderline " +

"= false'>");

//Тэг <SPAN> может использоваться в тех случаях, когда требуется отметить фрагмент текста для задания его свойств,

// и при этом не удается использовать никакой другой структурный тэг форматирования, т.е. тег без свойств, без форматирования

sod.document.writeln("<H1>Содержание:</H1>");

// перебор всех элементов Heading

for (var i = 0; i < document.all.length; i++) { //document.all.length-количество элементов в окне

var char1 = document.all[i].tagName.substring(0, 1); //берем первую букву из названия тега, в который заключен текущий эдемент (H)

var char2 = parseInt(document.all[i].tagName.substring(1, 2)); // берем вторую букву оттуда же

// первая трока if проверка что это первая буква H, и обшая длина названия тега 2,

// то есть это какой то Hх, где х- это число от 0 до 7 не включительно, это мы проверяем во второй строке if`a

if (("H" == char1) && (2 == document.all[i].tagName.length) &&

(char2 > 0) && (char2 < 7)) {

// Установка вложенного или простого списка.

// Либо опускаемся с помощью тегов <DL> до нужного уровня списка, либо поднимаемся с помощью тегов </DL>

// levels- что-то вроде массива нужен для нумерации списка (типа 1.1 1.2 и т.д.)

if (char2 > level)

for (; level < char2; level++) {

if (levels[level] == null)

levels[level] = 0;

sod.document.writeln("<DL>");

}

else if (level > char2)

for (; level > char2; level--) {

levels[level - 1] = 0;

sod.document.writeln("</DL>");

}

// увеличиваем номер заголовка на текущем уровне

levels[level - 1]++;

var hText = document.all[i].innerText; //определяем содержимое (текст), который находится внутри тега <Hx>...</Hx> главного окна

sod.document.writeln("<DT><SPAN>");

var strNum = "";

// цикл необходим для того, что бы подготовить в переменной strNum номер текущего раздела

for (var iOut = 0; iOut < level; iOut++) {

strNum += levels[iOut] + ".";

}

// и теперь его печатаем в окне с содержанием

sod.document.write(strNum);

// и добавляем его в начало строки в главном окне (которыая находится внутри <Hx> </Hx> . было <H2>Hello</H2>, стало <H2>1.1. Hello</H2>

document.all[i].insertAdjacentText("afterBegin", strNum + " ");

// в окно с содержанием впечатываем название текущего пункта и закрываем тег <SPAN> в итоге получаем <SPAN>1.1. Hello</SPAN>

sod.document.writeln(" " + hText + "</SPAN>");

// добавляем свойство для текущей строки содержания являющееся ссылкой на заголовок-объект в основном окне

sod.document.all[sod.document.all.length - 1].linkTo = document.all[i];

}

sod.document.close();

}

window.onload = setupHeaders;

// если работаем с фреймом то при закрытии основного окна проверяем налчие

// окна содержания и если оно есть то закрываем. т.е. при закрытии основного окна закрывается содержание

window.onunload = new Function("if (!sod.closed) sod.close()");

Таблица стилей

BODY {margin: 5pt}

H1 {font-family: verdana; color: navy}

H2 {font-family: Times New Roman; color: navy}

H3 {font-family: Arial; color: navy}

документ HTML

<HTML>

<HEAD>

<TITLE> Курсовая работа: Создание динамического содержания. Выполнила: Щербакова А.Н. И-9-15</TITLE>

</HEAD>

<p align="center"> <b><span lang="ru"><font size="7" color="#0000FF">Курс лекций по

экономической теории.</font></span></b></p>

<H1 align="center">ТЕМА 1. МЕТОДОЛГИЯ ЭКОНОМИЧЕСКОЙ НАУКИ. (Лекция 1) </H1>

<H2>Содержание экономической науки.</H2>

<span style="font-size: 12.0pt">Существует разветвленная

система наук, изучающих экономическую жизнь общества. Это и наука об

общих законах экономического развития (экономическая теория или экономикс) и отраслевые экономические науки (бухгалтерский учет,

маркетинг, теория и практика рекламы, экономика фирмы и т.д.), и науки

об истории развития экономической мысли.</span></p>

… далее следует основной текст…..

</BODY>

</HTML>

Результат

В результате выполнения курсовой работы, происходит открытие следующих двух окошек:

Список литературы:

1) Айзекс С. Dynamic HTML пер. с английского Санкт-Петербург изд. БХВ- Петербург, 2001 г. 496 с.:ил.

Информация о работе Создание динамического содержания