- •Міністерство освіти і науки україни
- •Методические указания
- •Порядок выполнения работ
- •Содержание отчёта
- •Контрольные вопросы
- •Лабораторная работа №2 Списки и таблицы в html.
- •2. Методические указания
- •3. Порядок выполнения работ
- •Атрибуты table:
- •Атрибуты td, th:
- •Содержание отчёта
- •Контрольные вопросы
- •Лабораторная работа № 3 Создание html-страницы с резюме.
- •2. Краткие теоретические сведения – правила составления резюме
- •Образец (пример) составления (написания) резюме
- •3. Методические указания
- •Лабораторная работа №4 Каскадные таблицы стилей (css).
- •2. Методические указания
- •3. Порядок выполнения работ
- •4. Порядок выполнения работы
- •5. Содержание отчёта
- •6. Контрольные вопросы
- •Лабораторная работа №5 html Формы.
- •2. Методические указания
- •3. Теоретические сведения
- •4. Практическое задание
- •5. Содержание отчёта
- •6. Контрольные вопросы
- •Лабораторная работа №6 Резка и верстка веб-страниц.
- •Методические указания
- •Порядок выполнения работ
- •Содержание отчёта
- •Контрольные вопросы
- •Лабораторная работа №7 Обработка событий в html.
- •2. Методические указания
- •3. Теоретические сведения
- •4. Практическое задание
- •5. Содержание отчёта
- •6. Контрольные вопросы
- •Лабораторная работа №8 Основы синтаксиса JavaScript
- •2. Методические указания
- •4. Теоретические сведения
- •5. Содержание отчёта
- •6. Контрольные вопросы
- •Лабораторная работа №9 Математические функции JavaScript. Объект Math.
- •2. Методические указания
- •3. Теоретические сведения
- •4. Содержание отчёта
- •5. Контрольные вопросы
- •Лабораторная работа №10 Объект JavaScript – document.
- •2. Методические указания
- •3. Теоретические сведения
- •Лабораторная работа №11 Объект JavaScript – Date.
- •Методические указания
- •Теоретические сведения
- •Содержание отчёта
- •Контрольные вопросы
- •Лабораторная работа №12 Объект JavaScript – Image.
- •Методические указания
- •Теоретические сведения
- •Содержание отчёта
- •Контрольные вопросы
- •Лабораторная работа №12 Объект JavaScript – window.
- •Методические указания
- •Теоретические сведения
- •4. Задания:
- •5. Содержание отчёта
- •6. Контрольные вопросы
- •Лабораторная работа №14
- •2. Методические указания
- •3. Теоретические сведения
- •4. Задания:
- •5. Содержание отчёта
- •6. Контрольные вопросы:
4. Практическое задание
Наберите следующий код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Лабораторная работа №6</title>
<style>
div {
font-size:14px;
font-family:Tahoma;
color:red;
border:1px solid #0000FF;
font-weight:bold;
width:450px;
text-align:center;
height:40px;
vertical-align:middle;
padding-top:20px;
margin-bottom:20px
}
</style>
<script language="javascript" type="text/javascript">
function PrimerClik(event){
switch (event.button){
case 0: alert("Вы щелкнули левой кнопкой мыши!"); break;
case 1: alert("Вы щелкнули средней кнопкой мыши!"); break;
case 2: alert("Вы щелкнули правой кнопкой мыши!"); break;
}
}
function PrimerMove(ElementId){
var s = document.getElementById(ElementId).style.color;
if (document.getElementById(ElementId).style.color == '') s = 'red';
if (s == 'red'){
document.getElementById(ElementId).style.color = 'green';
} else {
document.getElementById(ElementId).style.color = 'red';
}
}
</script>
</head>
<body onLoad="alert('Запускается лабораторная работа №6');" onUnload="alert('Вы закрыли лабораторную работу №6. Не забудьте сдать отчёт!!!');">
<div onMouseDown="PrimerClik(event);">Щелкните любой кнопкой мыши по тексту и проверьте "onMouseDown"</div>
<div onMouseUp="PrimerClik(event);">Щелкните любой кнопкой мыши по тексту и проверьте "onMouseUp"</div>
<div id="MoveId" onMouseMove="PrimerMove('MoveId');">Наведите курсор на элемент и проверьте "onMouseMove"</div>
<div id="MoveIdO" onMouseOver="PrimerMove('MoveIdO');">Наведите курсор на элемент и проверьте "onMouseOver"</div>
<div id="MoveIdS" onMouseOut="PrimerMove('MoveIdS');">Наведите курсор на элемент и проверьте "onMouseOut"</div>
<div id="MoveIdC" onclick="PrimerMove('MoveIdC');">Кликните на элементе и проверьте "onclick"</div>
<div id="MoveIdDC" onDblClick="PrimerMove('MoveIdDC');">Кликните дважды на элементе и проверьте "onDblClick"</div>
<div id="KeyPresElementId" style="padding-bottom:20px;">
Введите симвалоы с клавиатуры и проверьте "onKeyPress"<br>
<input type="text" name="KeyPresElement" id="KeyPresElement" onKeyPress="PrimerMove('KeyPresElementId');">
</div>
<div id="KeyUpElementId" style="padding-bottom:20px;">
Введите симвалоы с клавиатуры и проверьте "onKeyUp"<br>
<input type="text" name="KeyUpElement" id="KeyUpElement" onKeyUp="PrimerMove('KeyUpElementId');">
</div>
<div id="KeyDownElementID" style="padding-bottom:20px;">
Введите симвалоы с клавиатуры и проверьте "onKeyDown"<br>
<input type="text" name="KeyDownElement" id="KeyDownElement" onKeyDown="PrimerMove('KeyDownElementID');">
</div>
</body>
</html>
Проставьте комментарии. Проверьте все обработчики событий из таблицы.
5. Содержание отчёта
Отчёт должен содержать название и цель. Выполненное задание. Выводы.
6. Контрольные вопросы
Для чего нужны обработчики событий.
Перечислить обработчики событий клавиш мышки.
Перечислить обработчики событий курсора мышки.
Перечислить обработчики событий клавиатуры.
Перечислить обработчики событий документа.