Информатика и выч. техника \ Инфокоммуникации

Создание динамического HTML-документа с внедренным в него JavaScript-кода

Страницы работы

4 страницы (Word-файл)

Посмотреть все страницы

Скачать файл

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

Министерство образования и науки Российской Федерации

Новосибирский Государственный Технический Университет

Кафедра Вычислительной техники

Лабораторная работа №2

по дисциплине «Инфокоммуникации»

Создание динамического HTML-документа

Факультет: АВТ Преподаватель:

Группа: АМ-509 Новицкая Ю. В.

Студент: Плизга В.

Вариант: 6

Новосибирск 2009

Задание

Вариант 6

Тест на скорость реакции. После щелчка по кнопке в тестовом поле случайным образом, через случайные промежутки времени начинают появляться цветные изображения, по которым нужно успеть щелкнуть. Тестирование можно прекратить щелчком по кнопке, но не ранее, чем через некоторый минимальный отрезок времени. Выводится результат – процент удачных щелчков, который запоминается в cookie и показывается при повторном посещении.

Исходный текст созданной страницы

Вся лабораторная работа реализована в виде одного HTML-файла с внедренным в него JavaScript-кодом. Текст это файла приведен ниже.

<HTML>

<HEAD>

<!--

var timerID, startID, total, hits;

function showlayer(layername)

{eval('document.getElementById("'+layername+'").style.visibility="visible" ');}

function hidelayer(layername)

{eval('document.getElementById("'+layername+'").style.visibility="hidden" ');}

function stop()

{

clearTimeout(timerID);

document.getElementById("startBtn").disabled = false;

var exp = new Date( );

var nowPlusOneWeek = exp.getTime( ) + (7 * 24 * 60 * 60 * 1000);

exp.setTime(nowPlusOneWeek);

document.cookie = "total=" + total + "; expires=" + exp.toGMTString( );

document.cookie = "hits=" + hits + "; expires=" + exp.toGMTString( );

}

function start()

{

startID = setTimeout("allowStop();", 10000);

document.getElementById("stopBtn").disabled = true;

document.getElementById("startBtn").disabled = true;

changePic();

}

function allowStop()

{

document.getElementById("stopBtn").disabled = false;

clearTimeout(startID);

}

function changePic()

{

if (timerID != undefined)

clearTimeout(timerID);

eval('document.getElementById("pic").src="targets/'

+ Math.ceil(Math.random() * 12) + '.png"');

eval('document.getElementById("mainLayer").style.left='

+ Math.floor(Math.random() * (window.innerWidth-30)));

eval('document.getElementById("mainLayer").style.top='

+ Math.floor(Math.random() * (window.innerHeight-30)));

timerID = setTimeout("changePic()", Math.floor(Math.random()*3000)+500);

}

function hit()

{

hits++;

total++;

window.status = "Процент попаданий: " + Math.floor(hits/total*100) + "%";

}

function miss()

{

total++;

window.status = "Процент попаданий: " + Math.floor(hits/total*100) + "%";

}

function trimLeft(s)

{

while(s[0] == " ")

s = s.substr(1);

return s;

}

function init()

{

var aCookie = document.cookie.split(";");

var aCrumb = new Array;

hits = 0;

total = 1;

if (aCookie.length == 2)

{

aCrumb = trimLeft(aCookie[0]).split("=");

if (aCrumb[0] == "total")

total = parseInt(aCrumb[1], 10);

aCrumb = trimLeft(aCookie[1]).split("=");

if (aCrumb[0] == "hits")

hits = parseInt(aCrumb[1], 10);

}

window.status = "Процент попаданий: " + Math.floor(hits/total*100) + "%";

}

-->

</script>

</head>

#mainLayer {position:absolute; top:50; left:400; z-index:2;

visibility:visible; width:20px; height:22px; cursor:wait;}

#backLayer {position:absolute; top:0; left:0; width:100%;

height:100%; z-index:1; cursor:crosshair;}

</style>

</div>

<p><button onclick="start();" id="startBtn">Старт</button>

</div>

</body>

</html>

Выводы

Язык клиентских сценариев JavaScript является очень гибким и достаточно мощным средством «оживления» статичных HTML-страниц. Однако его использование сопряжено и с рядом сложностей. К ним относится, например, невысокая читабельность кода скрипта из-за его многочисленных «вкраплений» в код страницы. Эта проблема частично решается путем создания внешней библиотеки функций и классов, которые впоследствии только вызываются в нужных местах страницы, но абсолютным это решение назвать нельзя. Другая проблема связана с неоднозначной интерпретацией JavaScript-кода различными браузерами. В настоящий момент наметились некоторые позитивные изменения в этой области, и производители браузеров стали уделять больше внимания стандартам, провозглашенным консорциумом W3C, нежели своим собственным пусть эффективным, но не общепризнанным разработкам. Эти и другие недостатки Web-технологий затрудняют и замедляют процесс освоения Web-программирования после программирования desktop-приложений. И все же преимущества, которыми располагают эти технологии, являются более весомыми и помогают преодолеть все сопутствующие трудности.