Наименование дисциплины: Интернет-технологии и Web-дизайн
Тема (раздел) учебной программы: Использование JavaScript в HTML
Практическая работа № 8
1. Тема практической работы: Создание калькулятора
2. Количество часов: 2
3. Место проведения: компьютерный класс
4. Характер работы: репродуктивный, частично-поисковый
5. Форма организации деятельности студентов: групповая
6. Внутрипредметные и межпредметные связи: Программное обеспечение компьютерных сетей
7. Дидактические цели практической работы:
a. Обобщить, закрепить теоретические знания по теме: «Использование JavaScript в HTML»
b. Сформировать практические умения и навыки: обращения с ПК, навыки создания Web-страниц с использованием Блокнота, практические навыки создания форм, элементов форм, таблиц стилей, обработки данных, введенных в форму, использования браузера.
c. Сформировать исследовательские и интеллектуальные умения: использования различных способов обращения к данным, анализа возможностей применения полученных знаний по использованию JavaScript в HTML, самостоятельно вести исследование, оформлять результаты.
8. Задания студентам на самоподготовку:
· Теги и свойства элементов форм
· Форматы операторов JavaScript
· Свойства элементов форм
· Обработчики событий
· Встраивание JavaScript в документ HTML
· Таблицы
· Стили
· Проанализировать и сделать выводы о возможностях использования продуктов DHTML.
9. Оборудование: компьютеры класса IBM PC, ОС Windows 2000, браузер MS Iexplorer, текстовый редактор Блокнот.
10. Дидактическая структура практической работы:
Элементы урока | Содержание элементов урока | |
1. Целевая установка | Постановка целей практического занятия, ее обоснование. | 5 мин. |
2. Проверка теоретической готовности студентов к выполнению практической работы | Фронтальный опрос по ранее изученным темам: 1. Основные теги HTML-документа 2. Теги списков 3. Теги элементов форм 4. Реакция на действия пользователей 5. Встраивание Java-скриптов в документ HTML 6. Создание листа стилей 7. Встраивание листа стилей в файл HTML 8. Отображение Web-страниц с использованием JavaScript | 5 мин |
3. Инструктаж о содержании, этапах практической работы, способах (методах) действий, правилах и технике безопасности | Цель: Научиться создавать Web-страницы, пользуясь Блокнотом, разрабатывать форму калькулятора, изменять свойства элементов форм в ответ на действия пользователя, передавать параметры функци, закрепить знания JavaScript Этапы выполнения работы: 1. Создание новой Web-страницы 2. Создание формы калькулятора 3. Создание листа стилей 4. Написание обработчика события нажатия на кнопку «=» на языке JavaScript, выдающего результат вычислений 5. Сохранение Web-страницы 6. Проверка результатов работы | 5 мин |
4. Выполнения практической работы | Контроль и корректировка самостоятельной работы студентов | 65 мин |
5. Оценка выполненной работы | Возврат к целевой установке, что студенты знают, что умеют. Комментирование результатов работы. Выставление оценок Выдача домашнего задания | 10 мин |
Инструкция по выполнению практической работы №8
1. Создайте новый текстовый документ в Блокноте.
2. Введите основные теги HTML –документа
3. Создайте форму
4. Внуть формы поместите таблицу из четырех строк и пяти столбцов
5. Выполните объединение первых четырех ячеек первой строки по горизонтали
6. Вставьте в объединенную ячейку поле для ввода текста
7. В последнюю ячейку первой строки вставьте кнопку типа reset.
8. В остальные ячейки поместите кнопки типа button согласно рисунку:
9. Отформатируйте внешний вид калькулятора по своему вкусу. Используйте стили. Например:
<style>
input {border-width:5; width:30; height:30; cursor:hand}
input. txt{text-align:right; width: 160;}
table {background:silver; }
</style>
…
<input class="txt" type="text" size="23" name="pole">
…
10. Добавьте в поле два скрытых поля для накопления результата и хранения знака арифметической операци
<input type=hidden value='' name=result>
<input type=hidden value='' name=zn>
11. Напишите одну функцию обработки нажатия всех кнопок с изображением цифр. При вызове функции передавайте параметр – цифру. Функция должна добавлять к значению текстового поля полученный параметр.
function vvod(S) {
document. calk. pole. value=document. calk. pole. value+=S}
…
<td><input onclick="vvod('5')" type="button" value="5"></td>
…
12. Напишите функцию обработки нажатия кнопок со знаками арифметических операций, которая
· проверит, не пусто ли текстовое поле и если не пусто:
· сохранит содержащееся в текстовом поле значение в скрытом поле result
· очистит текстовое поле
· знак сохранит в скрытом поле zn
function znak(Z)
{
if (Z!='=')
{
if (document. calk. pole. value!='')
{ document. calk. zn. value=Z;
document. calk. result. value=document. calk. pole. value;
document. calk. pole. value='';
}
}
При вызове функции передавайте параметр – знак.
13. Добавьте в функцию обработку нажатия кнопки «=», которая
· присвоит значению текстового поля результат вычислений
· очистит скрытые поля
else
{
document. calk. pole. value=eval(document. calk. result. value+document. calk. zn. value+document. calk. pole. value);
document. calk. zn. value='';
document. calk. result. value=''
}
}
14. Сохраните файл
15. Проверьте работу калькулятора
16. Исправьте возможные ошибки
Код документа HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Калькулятор</title>
<script>
function change(el, color)
{
if (el. type=="button")
el. style. backgroundColor=color
}
function vvod(S) {
{ document. calk. pole. value=document. calk. pole. value+=S }
function znak(Z)
{
if (Z!='=')
{
if (document. calk. pole. value!='')
{ document. calk. zn. value=Z;
document. calk. result. value=document. calk. pole. value;
document. calk. pole. value='';
}
}
else
{
document. calk. pole. value=eval(document. calk. result. value+document. calk. zn. value+document. calk. pole. value);
document. calk. zn. value='';
document. calk. result. value=''
}
}
</script>
<style>
input {border-width:5; width:30; height:30; cursor:hand}
input. butt1 {border-width:5; width:200; height:30; cursor:hand}
input. txt{text-align:right; width: 160;}
table. calc{background:silver; }
</style>
</head>
<body>
<form onmouseout='change(event. srcElement, "efebde")' name="calk">
<table class="calc" cellSpacing="1" cellPadding="1" align="center" border="2">
<tr>
<td colSpan="4"><center><input class="txt" type="text" size="23" name="pole"></center>
<td><input onmouseover='change(this,"yellow")' onclick="vvod('C')" type="button" value="C" "></td>
</tr>
<tr>
<td><input onmouseover='change(this,"lightblue")' onclick="vvod('1')" type="button" value="1">
<td><input onmouseover='change(this,"lightblue")' onclick="vvod('2')" type="button" value="2" >
<td><input onmouseover='change(this,"lightblue")' onclick="vvod('3')" type="button" value="3" >
<td><input onmouseover='change(this,"lightblue")' onclick="vvod('4')" type="button" value="4" >
<td><input onmouseover='change(this,"lightblue")' onclick="vvod('5')" type="button" value="5" ></td></tr>
<tr>
<td><input onmouseover='change(this,"lightblue")' onclick="vvod('6')" type="button" value="6" >
<td><input onmouseover='change(this,"lightblue")' onclick="vvod('7')" type="button" value="7" >
<td><input onmouseover='change(this,"lightblue")' onclick="vvod('8')" type="button" value="8" >
<td><input onmouseover='change(this,"lightblue")' onclick="vvod('9')" type="button" value="9" >
<td><input onmouseover='change(this,"lightblue")' onclick="vvod('0')" type="button" value="0" ></td>
<tr>
<td><input onmouseover='change(this,"plum")' onclick="znak('/')" type="button" value="/" ></td>
<td><input onmouseover='change(this,"plum")' onclick="znak('*')" type="button" value="*" NAME="Button10"></td>
<td><input onmouseover='change(this,"plum")' onclick="znak('+')" type="button" value="+" >
<td><input onmouseover='change(this,"plum")' onclick="znak('-')" type="button" value="-" >
<td><input onmouseover='change(this,"plum")' onclick="znak('=')" type="button" value="=" >
<input type=hidden value='' name=result>
<input type=hidden value='' name=zn>
</table>
</form>
</body>
</html>
