Лабораторная работа 13. Web-документ

Краткая теория

Библиотеки внешних подпрограмм-функций в языке JavaScript могут быть представлены отдельными текстовыми файлами с расширением js, например, main.js, library.js и т.д.

Полный шаблон HTML-документа, испытательный стенд для выполнения внешних программ на JavaScript, должен иметь вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<HEAD>

<META http-equiv="Content-Type"

content="text/html; charset=utf-8">

<TITLE>Испытатель JS</TITLE>

</HEAD>

<BODY>

<H1>

Испытатель внешней библиотеки JavaScript

</H1>

<BUTTON id="myButton">Добавить абзац к документу</BUTTON>

</BODY>

</HTML>

Пример файла main.js, который должен находиться в одной папке с HTML-документом.

// Обработчик события onload

// Функциональный литерал будет вызван после полной загрузки

// документа и построения объектной модели.

window.onload = function()

{

// Назначить обработчик события onclick элементу с id="myButton".

document.getElementById("myButton").onclick = addP;

}

addP.counter = 1; // Счетчик абзацев. Переменная введена как свойство

// объекта addP, чтобы не вводить лишнее глобальное имя.

// Можно было также с этой целью воспользоваться замыканием.

// Обработчик события onclick на элементе с id="myButton".

function addP()

{

// Создадим элемент "абзац".

var el = document.createElement("p");

// Добавим к созданному элементу потомка -- текстовый элемент.

el.appendChild(document.createTextNode("Абзац номер "+(addP.counter++)+"."));

// Добавим построенный элемент к BODY -- и он сразу отобразится на экране.

document.body.appendChild(el);

}

DOM, Document Object Model: Таблица

Об отметках

Основные упражнения не отмечены никакими специальными знаками, их выполнения достаточно для удовлетворительной оценки. Дополнительные упражнения отмечены "звездочками", их выполнение необходимо для получения повышенной оценки.

- "5" - в отчете выполнены все основные упражнения, дополнительно выполнены упражнения с одной и двумя "звездочками".
- "4" - в отчете выполнены все основные упражнения, дополнительно выполнены упражнения с одной "звездочкой".
- "3" - в отчете выполнены все основные упражнения.

Упражнения

1. При нажатии на кнопку должен создаваться документ, состоящий из
  1. - заголовка,
    - одного абзаца.
2. За основу исходного кода генерируемого документа возьмите приведенный выше шаблон.
3. При нажатии на кнопку должен создаваться документ, состоящий из
  1. - заголовка,
    - нумерованного списка из пяти пунктов.

Пример 2.
1. При нажатии на кнопку должен создаваться документ, состоящий из
  1. - заголовка,
    - рисунка.
2. Задание для самостоятельного выполнения: в примере программы, приведенном ниже, выводится только рисунок, самостоятельно добавьте команды, которые выводят заголовок.
3. Пример рисунка:

1. Щёлкните рисунок для увеличения.
2. Пример документа:

1. Пример программы, файл main.js:
  1. window.onload = function() { myImageViewer(); } function myImageViewer() { // Img var myImgSrc = "landscape-06.jpg"; var myImgWidth = 160; var myImgHeight = 160; var myImgPosLeft = 20; var myImgPosTop = 20; var myImg = document.createElement("img"); // myImg.style.position = "absolute"; myImg.style.verticalAlign = "middle"; myImg.style.margin = "auto"; myImg.style.horizontalAlign = "middle"; myImg.width = myImgWidth; myImg.height = myImgHeight; myImg.style.borderStyle = "solid"; myImg.style.borderWidth = "1px"; myImg.style.borderColor = "white"; var myDivImg = document.createElement("div"); myDivImg.style.position = "absolute"; myDivImg.style.verticalAlign = "middle"; myDivImg.style.margin = "auto"; myDivImg.style.left = myImgPosLeft + "px"; myDivImg.style.top = myImgPosTop + "px"; myDivImg.style.width = myImgWidth + "px"; myDivImg.style.height = myImgHeight + "px"; myDivImg.style.backgroundColor = "#FFFFFF"; myDivImg.appendChild(myImg); myImg.src = myImgSrc; myImg.title = myImgSrc; myImg.alt = myImgSrc; document.body.appendChild(myDivImg); }
2. * При нажатии на кнопку должен создаваться документ, состоящий из
  1. - заголовка,
    - таблицы, состоящей из трех строк и двух столбцов.
3. За основу исходного кода генерируемого документа возьмите приведенный выше шаблон.
4. Пример программы, файл main.js:

- 1. window.onload = function() { myPrintTable(); } function myPrintTable() { var myTable = document.createElement("table"); var myTableBody = document.createElement("tbody"); var myRow = document.createElement("tr"); var myCell = document.createElement("td"); var myText = document.createTextNode("Текст в ячейке."); myCell.appendChild(myText); myRow.appendChild(myCell); myTableBody.appendChild(myRow); myTable.appendChild(myTableBody); document.body.appendChild(myTable); }

1. ** Фотогалерея в таблице. Количество изображений читается из текстового файла number.txt. Имена файлов с изображениями имеют вид img-01.jpg, img-02.jpg и т.д. При формировании ссылок на изображения имена файлов должны генерироваться в цикле.

Источники

Основные

1. JavaScript: Дуванов А. Продвинутый JavaScript (заметки 9-15).
2. JavaScript: Учебник.
3. JavaScript: Дуванов А. JavaScript-конструирование.
4. JavaScript, примеры: Дуванов А. JavaScript-конструирование. Исходные коды примеров.

Дополнительные

1. JavaScript: Дуванов А. JavaScript-конструирование. Демоверсия учебника.
2. JavaScript: Дуванов А. JavaScript-конструирование. Часть 3.
3. JavaScript: Дуванов А. JavaScript-конструирование. Часть 4.
4. JavaScript: Дуванов А. Продвинутый JavaScript.

Page updated

Google Sites

Report abuse