ОТЧЁТ ПО ЛАБОРАТОРНОЙ РАБОТЕ № 2
«Основы языков HTML и JavaScript»
Цель работы: знакомство с принципами построения (создания) WEB-страниц
при помощи языков HTML и JavaScript.
Исходный текст программы (пункт 3.1):
<html>
<head>
<script LANGUAGE="JavaScript">
if (document.images) {
var elflist=new Image();
elflist.src = "images/elflist.gif";
var elftrans=new Image();
elftrans.src="images/elftrans.gif";
}
function flip (imgName, imgVar) {
if (document.images)
document[imgName].src=eval(imgVar);
return true;
}
function nothing() {
}
</script>
<style>H1, TD {font-family:sans-serif}</style>
<title>Эльф-помощник</title>
</head>
<body>
<h1>Эльф-помощник</h1><hr>
<table border="0"><tr><td>
<a href = "javascript:nothing();"
onMouseOver="flip('elf','elftrans.src'); flip('elf2','elflist.src');"
onMouseOut="flip('elf','elflist.src'); flip('elf2','elftrans.src');">
<img name="elf" src="images/elflist.gif" alt="Эльф-помощник" border="0"
WIDTH="200" HEIGHT="200"></a>
<img name="elf2" src="images/elftrans.gif" alt="Эльф-невидимка" border="0"
WIDTH="200" HEIGHT="200">
</td></tr>
<tr><td>Нажмите на эльфа!</td></tr>
</table>
</body>
</html>
Результат работы программы:
Результат выполнения программы при наведении курсора мыши на
изображение эльфа:
Результат выполнения программы после внесения изменений согласно
пункту 3.2: установлена видимость границ таблицы; модификациями кода
картинки разместились в разных ячейках и строках таблицы:
Результат выполнения программы после внесения изменений согласно
пункту 3.3: после изменения имени elf внутри тега <img> скрипт стал
работать неверно (изменения картинок не происходит):
Результат выполнения программы после внесения изменений согласно
пункту 3.4: при нажатии на первую ячейку происходит вывод всплывающего
сообщения:
Результат выполнения программы после внесения изменений согласно
пункту 3.5: после изменения кода при нажатии на первую ячейку происходит
открытие созданного html-документа:
Результат выполнения программы после внесения изменений согласно
пункту 3.6: после изменения стиля тегов <h1> и <td> страница выглядит
следующим образом: (сл. страница)
Вывод: в ходе выполнения лабораторной работы мы познакомились с
основами разработки WEB-страниц при помощи языков HTML и JavaScript,
изучили их базовые тэги и применили полученные знания при создании
собственного html-документа.
