Автор: Поздняков Анатолий Михайлович
Должность: учитель информатики
Учебное заведение: МБОУ "Лицей №124"
Населённый пункт: Барнаул
Наименование материала: Разработка урока
Тема: Разработка функций с радиокнопкой
Раздел: полное образование
МУНИЦИПАЛЬНОЕ БЮДЖЕТНОЕ ОБЩЕОБРАЗОВАТЕЛЬНОЕ
УЧРЕЖДЕНИЕ
«ЛИЦЕЙ № 124»
Тема урока:
Разработка функций с радиокнопкой.
Предмет: Информатика и ИКТ.
Дата проведения: 26.01.23
11 В класс
Учитель: Поздняков Анатолий Михайлович
1.
Урок № 6.12 (Сетевой город).
2.
Тема:
Разработка функций с радиокнопкой.
3.
Цель: «Разработка на языке JavaScript выполнения арифметических и
тригонометрических операций с тэгом Radio».
4.
Задачи:
обучающие: научиться разрабатывать страницу с тэгом Radio, написать
сценарий обработки события выбора элемента радиокнопки;
развивающие: расширить способности по написанию и отладке
страниц с различными видами управляющих элементов тэга Form.
воспитывающие: концентрация внимания при разработке алгоритма
сценария, воспитание настойчивости и аккуратности при написании и
отладке работы реализованных функций;
5.
Оборудование: компьютер учителя, проектор, локальная сеть,
компьютеры учащихся, текстовый редактор, браузер для просмотра
страниц HTML.
6.
Последовательность отдельных этапов урока.
План занятия:
1.
Повторение материала предыдущего урока: описание тэга Radio,
определение выбранного элемента.
2.
Цель урока: «Разработка выполнения арифметических и
тригонометрических операций с тэгом Radio».
3.
Описание примера разработки страницы с операцией сложения.
4.
Самостоятельная работа учащихся для реализации
тригонометрических операций.
5.
Поиск ошибок и отладка сценариев учащихся.
6.
Выставление оценок по результатам работы готовых страниц.
7.
Домашнее задание для расчета площадей фигур.
1.Вопросы по тэгу Radio.
1.
Как записывается тип Radio?
2.
Какое имя имеет группа элементов Radio ?
3.
Как определить, какой элемент выбран?
2.Цель урока.
Формулируется цель урока :
«Разработка на языке JavaScript выполнения арифметических и
тригонометрических операций с тэгом Radio».
3.Описание примера разработки страницы с операцией
сложения.
<html>
<head> <title> Радиокнопка имя файла radio.html </title>
<style> .s1,input {color:green; font-size:20pt; } </style>
<script>
</head>
<body>
<div class='s1'>
<h2> Радиокнопка </h2>
Введем тэг Form:
<form name='f1'>
Текстовые поля:
a<input type='text' name='t1'><br> - текстовое поле для числа a;
b<input type='text' name='t2'><br>- текстовое поле для числа b;
r<input type='text' name='tr'><br>- текстовое поле для результата r;
Радиокнопки для каждой операции: +, -, *, /
имя – ‘r1’ , value для всех операций занумеровано от 1 до 4:
<input type='radio' name='r1' value='1'>+<br>
<input type='radio' name='r1' value='2'>-<br>
<input type='radio' name='r1' value='3'>*<br>
<input type='radio' name='r1' value='4'>/<br>
Кнопка для вызова функции, выполняющей операцию:
<input type='button' value='Найти' onclick='f()'>
Конец тэга Form и закрывающие тэги для страницы:
</form>
</div>
</body>
</html>
Разработка функции, выполняющей операцию:
<script>
function f()
{ var d=document,a,b,r,k,i,v; - описание переменных для чисел и
результата;
Чтение чисел a и b:
a=Number(d.f1.t1.value );
b=Number(d.f1.t2.value );
Определение длины массива элементов формы и определение
номера выбранной радиокнопки:
k=d.f1.elements.length;
for(i=0; i<k; i++)
if (d.f1.elements[i].checked) break;
Определение значения параметра value выбранной радиокнопки:
v=Number(d.f1.elements[i].value);
Выполнение операции с помощью оператора switch:
switch (v)
{
case 1: r=a+b; break;
case 2: r=a-b; break;
case 3: r=a*b; break;
case 4: r=a/b; break;
}
Запись результата операции в текстовое поле r:
d.f1.tr.value=r;
}
</script>
Полный пример разработанной страницы с радиокнопками:
<html>
<head> <title> Радиокнопка имя файла radio.html </title>
<style> .s1,input {color:blue; font-size:20pt; margin-left:100px;}
</style>
<script>
function f()
{ var d=document,a,b,r,k,i,v;
a=Number(d.f1.t1.value );
b=Number(d.f1.t2.value );
k=d.f1.elements.length;
for(i=0; i<k; i++)
if (d.f1.elements[i].checked) break;
v=Number(d.f1.elements[i].value);
switch (v)
{
case 1: r=a+b; break;
case 2: r=a-b; break;
case 3: r=a*b; break;
case 4: r=a/b; break;
}
d.f1.tr.value=r;
}
</script>
</head>
<body>
<div class='s1'>
<h2> Радиокнопка </h2>
<form name='f1'>
a<input type='text' name='t1'><br>
b<input type='text' name='t2'><br>
r<input type='text' name='tr'><br>
<input type='radio' name='r1' value='1'>+<br>
<input type='radio' name='r1' value='2'>-<br>
<input type='radio' name='r1' value='3'>*<br>
<input type='radio' name='r1' value='4'>/<br>
<input type='button' value='Найти' onclick='f()'>
</form>
</div>
</body>
</html>
Рис1. Вид страницы с радиокнопкой. Операция сложения.
Текст файла в папке: radio.html.
4.Самостоятельная работа учащихся для реализации
тригонометрических операций.
После отладки функции для операций: +, -, *, / учащимся
предлагается добавить тригонометрические функции: sin,cos,tg.ctg:
<input type='radio' name='r1' value='5'>sin<br>
<input type='radio' name='r1' value='6'>cos<br>
<input type='radio' name='r1' value='7'>tg<br>
<input type='radio' name='r1' value='8'>ctg<br>
Для выполнения этих операций нужно:
1.
Расширить оператор switch для новых значений переменной v;
2.
При выполнении операции воспользоваться библиотекой
математических функций Math. Значение угла вводить в
градусах, для выполнения стандартной функции перевести его в
радианы.
Пример для sin:
case 5: rad=a*Math.PI/180;
r=Math.sin(rad);
break;
Необходимо самостоятельно написать сценарий для всех остальных
функций.
5.Поиск ошибок и отладка сценариев учащихся.
Учащиеся самостоятельно дописывают сценарий и выполняют
его отладку. При неправильной работе сценария выводят на
экран текущую информацию с помощью оператора alert(r);
6.Выставление оценок по результатам работы готовых страниц.
Проверка готовой работы производится с помощью задания угла в
текстовом поле a:
a=30
При выборе радиокнопки для sin в поле результата должно быть: 0.5
При выборе радиокнопки для cos в поле результата должно быть:
0.866
a=45
При выборе радиокнопки для sin в поле результата должно быть:
0.707
При выборе радиокнопки для tg в поле результата должно быть: 1
Если результат работы правильный, то ученику ставится оценка 5.
Если результат работы неправильный, но при подсказке учителя он
может исправить ошибку, то ставится оценка 4.
Если результат неправильный, и при подсказке учителя ученик не
может исправить ошибку, то ставится оценка 3.
Оценка 2 ставится в том случае, если ученик совсем не выполнил
задание (все учащиеся физико-математического класса выполняют
задания).
7.Домашнее задание для расчета площадей фигур.
Для подготовки к практической работе по радиокнопкам дома:
1.Подобрать формулы для расчета площадей плоских фигур:
окружностей, треугольников, параллелограммов, ромбов, трапеций.
2.Повторить описание тэга Radio и написание сценария для его
обработки.
Таблица этапов урока.
Этапы урока.
Что делают:
ученики
учитель
1.Повторение
материала
предыдущего урока
Отвечают на вопросы Задает вопросы по
предыдущему
материалу
2.Формулирование
цели урока:
«Разработка
выполнения
арифметических и
тригонометрических
операций с тэгом
Radio».
Слушают цель и
небольшие
пояснения к цели.
Формулирует цель
урока и отмечает
некоторые его
особенности.
3.Описание примера
разработки страницы
с операцией
сложения.
В текстовом
редакторе вводят
текст примера
страницы с
радиокнопкой
В текстовом
редакторе набирает
пример страницы с
радиокнопкой и
демонстрирует его
всем учащимся с
помощью проектора.
4.Самостоятельная
работа учащихся для
реализации
тригонометрических
операций.
Учащиеся
самостоятельно
разрабатывают
сценарий для
тригонометрических
функций: sin, cos, tg,
ctg.
Просматривает у
всех разработанные
страницы,
формулирует
замечания и
предложения по
дальнейшему
развитию
написанного
сценария.
5.Поиск ошибок и
отладка сценариев
учащихся.
Отыскивают ошибки
и отлаживают
написанный
сценарий с помощью
оператора alert.
Предлагает варианты
поиска ошибок и
отладки сценария.
6.Выставление
оценок по
результатам работы
готовых страниц.
Демонстрируют
работу своих
страниц, выполняют
операции
Проверяет работу
сценария у каждого
ученика, высказывает
замечания и ставит
предложенные
учителем.
оценки.
7.Домашнее задание
для расчета
площадей фигур.
Записывают
домашнее задание,
задают вопросы о его
выполнении.
Задает домашнее
задание и объясняет
варианты его
выполнения.
Самоанализ урока (рефлексия).
1.Каково место данного урока в теме, разделе, курсе? Его связь с
предшествующими уроками?
Написание сценария с радиокнопками является одной из
центральных тем, на основе которой учащиеся будут разрабатывать
свой собственный проект с разнообразными вопросами и тестами,
где обязательно приходится применять страницы с радикнопками.
Тема является продолжением тем работы с тэгом Form и
текстовыми полями.
2.Какие особенности класса были учтены при планировании урока?
Урок был проведен в классе физико-математического профиля,
поэтому содержанием сценария были арифметические и
тригонометрические операции. В общем случае для других
профилей радиокнопками можно обозначать любые свойства
какого-либо объекта, например: времена года, виды транспорта,
«меню» в столовой и т.д.
3.Какие задачи планировалось решать на уроке? Чем обосновывался
такой выбор задачи?
Учащимся предлагалась задача, которую часто приходится
предлагать пользователю какого-либо сайта, где требуется выбор
одного какого-либо свойства из многих.
Учащиеся должны были понять, как написать сценарий на языке
JavaScript для такого выбора
.
4.Чем обосновывался выбор структуры и типа урока?
Структура и тип урока обосновывался на том, чтобы учащиеся
физико-математического класса получили возможность для
решения математических задач при помощи разработки страниц со
сценариями.
5.Чем обосновывался выбор содержания, форм и методов обучения
(по элементам урока)?
Элементы урока предлагались в форме постепенного усложнения
написанного сценария на основе самостоятельной работы. В таком
виде приходится работать всем разработчикам своих проектов и
нужно иметь определенный опыт для развития и отладки
написанных программ.
6.Какие условия (учебно-материальные, гигиенические, морально-
психологические, эстетические и временные) были созданы на
уроке?
Перед этим уроком учащееся уже написали несколько сценариев на
языке JavaScript с текстовыми полями и имели достаточный опыт их
отладки. Поэтому для них не было большой трудностью освоить
новый тэг radio с его применением для математических операций и
дальнейшей самостоятельной работой.
По времени у них осталось около половины урока на
самостоятельную работу, для которой было предложено немного
операций. Они должны были выполнить задание в отведенное
время, и только немногие ученики не смогли реализовать до конца
все операции.
7.Были ли отклонения от плана урока? Почему? Какие именно? К
чему они привели?
Некоторые учащиеся очень быстро выполнили задание. Для них
были приготовлены дополнительные операции, найти a^b и a!.
Это более сложные операции, где нужно использовать цикл.
Их реализация продолжалась до конца урока.
Учащиеся получили за них дополнительные оценки.
8.Как можно оценивать результаты урока? Решены ли его задачи?
Не будет ли перегрузки учащихся?
Результаты урока оказались успешными. Большинство учащихся
выполнили предложенное задание. Самые лучшие учащиеся
реализовали дополнительные операции. У некоторых учащихся
остались ошибки. Было предложено исправить их в начале
следующего урока, и тогда поставить оценки. Перегрузок учащихся
не было, хотя многие поняли, что часто некоторые ошибки не та
просто найти и устранить на языке JavaScript.
9.Какие выводы на будущее можно сделать из результата урока?
В начале урока учащимся трудно было понять, что такое массив
elements, который содержит все элементы формы, и, как с ним
работать.
Появилось решение начать работу с ним раньше при изучении
текстовых полей формы.
Для более полной отработки тэга radio необходимо предложить
учащимся домашнее задание для реализации других
распространенных операций.