Лабораторная работа 7. Клиентский JavaScript

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

Библиотеки внешних подпрограмм-функций в языке 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);

}

Об отметках

- "5" - выполнены 5 упражнений.
- "4" - выполнены 4 упражнения.
- "3" - выполнены 3 упражнения.

Упражнения

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

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

Пример 2.
1. При нажатии на кнопку должен создаваться документ, состоящий из
  1. - заголовка,
    - рисунка.
2. При нажатии на кнопку должен создаваться документ, состоящий из
  1. - заголовка,
    - таблицы, состоящей из трех строк и двух столбцов.
3. За основу исходного кода генерируемого документа возьмите приведенный выше шаблон.
4. Фотогалерея в таблице. Количество изображений читается из текстового файла 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