zabika.ru 1

Использование ПСПО в образовательном процессе


Номинация: «Разработка уроков курса «Информатика и ИКТ»

Раздел
«Алгоритмизация и программирование.
Редактор Lasarus v0.9.24 бета»


10 класс.

Практическая работа №5

«Светофор»

Цели:


    закрепление навыков работы в редакторе Lasarus;

  • продолжение изучения основ работы в редакторе Lasarus;

  • на примере составления программы «Светофор» познакомить учащихся с новым компонентом Tshape и его свойствами;

  • повторение алгоритмической конструкции ветвление и подпрограмм;

  • развитие алгоритмического и логического мышления учащихся;

  • развитие умения планирования своей деятельности;

  • повышение творческой активности учащихся.



Программно-дидактическое обеспечение: ПК, проектор, редактор векторной графики OpenOffice.org Draw, редактор Lasarus,

редактор OpenOffice.org Impress, редактор экзаменов KDE, инструкции по выполнению практической работы.
План:

  • Актуализация знаний

  • Изучение нового материала

  • Применение приобретенных знаний и отработка навыков.

  • Тестирование

  • Домашнее задание

Ход урока.


1.
На предыдущем уроке учащиеся выполняли индивидуальное задание: По готовой программе на языке программирования Pascal составить блок-схемы с использованием редактора векторной графики.

Например:
Введите с клавиатуры три числа: А, В,С. Если А=С, то все числа замените их квадратами. Иначе, А сделайте равным сумме В и С, С обнулите, В оставьте без изменений. Выведите результаты.

Program pr1; uses crt;

var a,b,c: real;

begin clrscr;

write ('введите число А'в); readln(A);


write ('введите число B'в); readln(B);

write ('введите число C'в); readln(C);

if A=C

then begin A:=sqr(A); B:=sqr(B); C:=sqr(C) end

else begin A:=B+C; C:=0 end;

write('A=',A:3:1,'B=',B:3:1,'C=',C:3:1)

end.


На этом уроке мы используем результаты этих заданий — распечатанные блок-схемы для выполнения следующих индивидуальных заданий.

Например чему равно значение А, В, С при следующих начальных значениях:


  1. А=5; В=2,4; С=5;

  2. А=0; В=0; С=6


2. Выполняем задания на тему «Процедуры и функции». (подготовлена презентация в редакторе OpenOffice.org Impress ):




3. Повторяем основные элементы редактора Lasarus с помощью проектора. Вид окна проектора:



Повторяем основные объекты и инструменты, свойства, события.

Отвечаем на следующие вопросы:

- как можно изменить текст надписи; (Caption)

- как настроить шрифт; (TFont)

- как изменить цвет шрифта; (Color)

- реагирование на событие «щелчок мышью»; (OnClick)

- когда и как переименовывать кнопки.
3. Далее раздаются инструкции по выполнению практической работы «Светофор». (Приложение1 раздаются для сильных классов, они работают самостоятельно. Приложение 2 раздаются, если класс работает вместе с учителем). Определяется цель и ход работы.

В нашей новой программе мы нарисуем светофор с тремя лампочками, способными реагировать на наведение указателя мыши. Когда указатель наведен на лампочку, она меняет свой цвет. Примерный вид окна программы, которая у нас должна получиться , показан на экране проектора.




Вот что должно у нас получиться.
Для этой программы нам потребуется только один компонент - Shape (Фигура). С его помощью можно рисовать на форме простые геометрические фигуры: круги, прямоугольники, овалы. Круглую лампочку светофора мы сделаем именно так.
4. Учащиеся начинают выполнять практическую работу. В ходе работы учитель делает пояснения.

Делаем анализ. Подводим итоги.
5. В конце урока учащимся предлагаем выполнить тест на компьютере (Редактор экзаменов KDE).
6. Домашнее задание: добавить новые элементы в программу.

Приложение 1.
Практическая работа №5

«Светофор»

(С пояснениями учителя)
1. Форма и компоненты

Запустите редактор Lasarus и создайте новый проект. Сохраните его как Светофор. На форме нам надо разместить объекты — лампочки светофора. Выберите на вкладке Additional (Дополнительные) палитры компонентов значок TShape (Фигура) и нарисуйте объект на форме методом протягивания. Добавим еще две фигуры.


Вот что должно у нас получиться
2. Настройка фигур

Сначала превратим прямоугольник, ограничивающую фигуру, в квадрат. Для этого дадим свойствам Width (Ширина) и Height (Высота) значение 60. А форма фигуры задается свойством Shape. Выберем для этого свойства значение StCircle (Круг).



Фигура состоит из контура и внутренней области, которые можно раскрасить в разные цвета. Параметры контура определяет свойство Pen (Контур). Это составное свойство, которое можно развернуть в Инспекторе объектов. Цвет контура определяется подсвойством Color (Цвет). Щелкните на нем и выберите в раскрывающимся списке значение clRed (Красный цвет).


Задаем цвет рамки фигуры

Параметры закраски фигуры задаются свойством Brush (Кисть). Здесь нас ждут некоторые сложности. Дело в том, что мы хотим, чтобы наши фигуры первоначально не были закрашены. Прозрачность фигуры задается подсвойством Style (Стиль). Чтобы фигура была прозрачной, надо выбрать для него значение bsColor (Прозрачный).

Итак, мы будем включать и выключать лампочки, изменяя свойство Brush.Style (стиль заливки) и одновременно корректируя цвет заливки — свойство Brush.Color.

Точно также настроим и остальные фигуры.



Форма после добавления настройки фигур
3. Программируем лампочки

Мы знаем, что элементы управления могут реагировать на события. Эти события возникают при работе с программой. Мы уже знаем, что фигуры могут реагировать на наведение указателя мыши. Но нас ждет одна неприятная тонкость.

Обратите внимание, что даже если лампочка у нас круглая, маркеры изменения размера располагаются по сторонам прямоугольника. То есть система Lasarus продолжает считать наши фигуры прямоугольными.

Это означает, что при наведении указателя мыши на уголок фигуры программа будет считать, что лампочку надо зажигать. Это неправильно.

Нам придется вручную (точнее говоря, программно) отслеживать положение указателя мыши в пределах лампочки, задав их свойствам Enabled (Включен) значение False (Нет).


Что теперь произойдет? Для отключенных объектов никаких событий не возникает. А что произойдет, если указатель мыши будет наведен на лампочку? Кому, какому объекту будет принадлежать событие MouseMove (Движение мыши)? Оно будет передано другому объекту, Оно будет передано другому объекту, контейнеру, в котором располагается фигура. В нашем случае это сама форма.

Форма — это тоже объект программы, обладающий свойствами и способный реагировать на события. Щелкните на ней вне фигур, откройте в окне Инспектора объектов вкладку Events (События) и дважды щелкните напротив события OnMouseMove (При движении мыши).

Редактор Lasarus создаст обработчик этого события — процедуру FormMouseMove. Эта процедура отличается от тех, с которыми мы имели дело до сих пор. В нее передаются дополнительные параметры.
procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);

Нас интересуют только параметры X и Y. Они определяют положение указателя мыши на форме.
4. Что произойдет при наведении указателя.

Давайте подумаем, что должна делать процедура FormMouseMove. Проверим, наведен ли указатель на первую лампочку. Если да, зажигаем ее, если нет — гасим. Выполняем ту же проверку для второй и третьей лампочки. Для каждой лампочки выполняются одни и те же действия. Это значит, что мы их можем оформить в виде одной функции.

Мы знаем, что для сплошной закраски надо задать свойству Brush.Style значение bsSolid, а для гашения лампочки — значение bsClear.

Пусть наша функция (назовем ее OnShape) и возвращает значение констант, описывающих способ заполнения фигуры.

Какие параметры мы передадим в функцию? Во-первых, надо указать, для какой фигуры производится проверка. Во-вторых, надо передать в функцию координаты указателя мыши.

Включить и выключить первую лампочку можно так:
Shape1.Brush.Color := clred;

Shape1.Brush.Style := OnShape(Shape1,X,Y);


Похожие операторы надо записать и для других фигур:
Shape2.Brush.Color := clYellow;

Shape2.Brush.Style := OnShape(Shape2,X,Y);

Shape3.Brush.Color := clLime;

Shape3.Brush.Style := OnShape(Shape3,X,Y);
Эти операторы и составят содержимое процедуры FormMouseMove.
5. Попадание в фигуру

Итак, нам надо написать функцию OnShape. Наша функция вызывается из процедуры FormMouseMove и поэтому, согласно требованию языка Pascal, должна быть описана раньше.

В окне кода переведите указатель мыши выше ранее созданной процедуры FormMouseMove.
function OnShape (sh: Tshape; X, Y:Integer): TBrushStyle;
begin
end;

Давайте определим, наведен ли указатель на фигуру. Сначала вычислим радиус фигуры. Он составляет половину ее высоты или ширины:
r:= sh.Width div 2;

Теперь найдем координаты центра фигуры и присвоим их вспомогательным переменным. Чтобы найти координаты центра фигуры, прибавим к значениям левой и верхней границ величину радиуса:
cx:= sh.Left + r;

cy:= sh.Top + r;

Далее вычислим квадрат расстояния от центра и тоже присвоим его значение вспомогательной переменной:
d2:= (X-cx)*(X-cx)+(Y-cy)*(Y-cy);

Нам надо ычислить значение функции. По правилам языка Pascal нужное значение надо присвоит переменной, имя которой совпадает с именем фукции, то есть переменной Onshape. Например, если курсор мыши не наведен на лампочку, нам надо написать оператор:
onshape:=bsClear;

Если же указатель находится внутри фигуры, то фигуру нужно сделать непрозрачной:
if d2
Осталось описать все использованные нами в процедуре переменные:
var r,cx,cy,d2:integer;

Программа готова! Запустите ее!
Вот как выглядит написанный нами текст программы в окне кода
function OnShape (sh: Tshape; X, Y:Integer): TBrushStyle;

var r,cx,cy,d2:integer;


begin

r:= sh.Width div 2;

cx:= sh.Left + r;

cy:= sh.Top + r;

d2:= (X-cx)*(X-cx)+(Y-cy)*(Y-cy);

onshape:=bsClear;

if d2
end;
procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,

Y: Integer);

begin

Shape1.Brush.Color := clred;

Shape1.Brush.Style := OnShape(Shape1,X,Y);

Shape2.Brush.Color := clYellow;

Shape2.Brush.Style := OnShape(Shape2,X,Y);

Shape3.Brush.Color := clLime;

Shape3.Brush.Style := OnShape(Shape3,X,Y);

end;
6. Приведите окно в порядок.
Настройте размер окна (сейчас в нем слишком много свободного места);

Смените заголовок окна (form1 — явно не подходит);

Смените фоновый цвет окна

Запретите изменение размеров окна (чтобы огни светофора не пропадали из виду).



Приложение 2.
Практическая работа №5

«Светофор»
1. Форма и компоненты

Запустите редактор Lasarus и создайте новый проект. Сохраните его как Светофор. Выберите на вкладке Additional (Дополнительные) палитры компонентов значок TShape (Фигура) и нарисуйте объект на форме методом протягивания. Добавим еще две фигуры.


Вот что должно у нас получиться
2. Настройка фигур

Сначала превратим прямоугольник, ограничивающую фигуру, в квадрат. Для этого дадим свойствам Width (Ширина) и Height (Высота) значение 60. А форма фигуры задается свойством Shape. Выберем для этого свойства значение StCircle (Круг).







Фигура состоит из контура и внутренней области, которые можно раскрасить в разные цвета. Параметры контура определяет свойство Pen (Контур). Это составное свойство, которое можно развернуть в Инспекторе объектов. Цвет контура определяется подсвойством Color (Цвет). Щелкните на нем и выберите в раскрывающимся списке значение clRed (Красный цвет).


Задаем цвет рамки фигуры

Параметры закраски фигуры задаются свойством Brush (Кисть). Здесь нас ждут некоторые сложности. Дело в том, что мы хотим, чтобы наши фигуры первоначально не были закрашены. Прозрачность фигуры задается подсвойством Style (Стиль). Чтобы фигура была прозрачной, надо выбрать для него значение bsColor (Прозрачный).

Итак, мы будем включать и выключать лампочки, изменяя свойство Brush.Style (стиль заливки) и одновременно корректируя цвет заливки — свойство Brush.Color.

Точно также настроим и остальные фигуры.



Форма после добавления настройки фигур
3. Программируем лампочки
Редактор Lasarus создаст обработчик этого события — процедуру FormMouseMove. Эта процедура отличается от тех, с которыми мы имели дело до сих пор. В нее передаются дополнительные параметры.

procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);

Нас интересуют только параметры X и Y. Они определяют положение указателя мыши на форме.
4. Что произойдет при наведении указателя.

Включить и выключить первую лампочку можно так:

Shape1.Brush.Color := clred;

Shape1.Brush.Style := OnShape(Shape1,X,Y);

Похожие операторы надо записать и для других фигур:
Shape2.Brush.Color := clYellow;

Shape2.Brush.Style := OnShape(Shape2,X,Y);

Shape3.Brush.Color := clLime;

Shape3.Brush.Style := OnShape(Shape3,X,Y);

Эти операторы и составят содержимое процедуры FormMouseMove.
5. Попадание в фигуру

В окне кода переведите указатель мыши выше ранее созданной процедуры FormMouseMove.
function OnShape (sh: Tshape; X, Y:Integer): TBrushStyle;
begin
end;
Давайте определим, наведен ли указатель на фигуру. Сначала вычислим радиус фигуры. Он составляет половину ее высоты или ширины:

r:= sh.Width div 2;

Теперь найдем координаты центра фигуры и присвоим их вспомогательным переменным. Чтобы найти координаты центра фигуры, прибавим к значениям левой и верхней границ величину радиуса:

cx:= sh.Left + r;

cy:= sh.Top + r;

Далее вычислим квадрат расстояния от центра и тоже присвоим его значение вспомогательной переменной:
d2:= (X-cx)*(X-cx)+(Y-cy)*(Y-cy);

Нам надо ычислить значение функции. По правилам языка Pascal нужное значение надо присвоит переменной, имя которой совпадает с именем фукции, то есть переменной Onshape. Например, если курсор мыши не наведен на лампочку, нам надо написать оператор:
onshape:=bsClear;
Если же указатель находится внутри фигуры, то фигуру нужно сделать непрозрачной:
if d2
Осталось описать все использованные нами в процедуре переменные:
var r,cx,cy,d2:integer;
Программа готова! Запустите ее!
Вот как выглядит написанный нами текст программы в окне кода
function OnShape (sh: Tshape; X, Y:Integer): TBrushStyle;

var r,cx,cy,d2:integer;

begin

r:= sh.Width div 2;

cx:= sh.Left + r;

cy:= sh.Top + r;


d2:= (X-cx)*(X-cx)+(Y-cy)*(Y-cy);

onshape:=bsClear;

if d2
end;
procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,

Y: Integer);

begin

Shape1.Brush.Color := clred;

Shape1.Brush.Style := OnShape(Shape1,X,Y);

Shape2.Brush.Color := clYellow;

Shape2.Brush.Style := OnShape(Shape2,X,Y);

Shape3.Brush.Color := clLime;

Shape3.Brush.Style := OnShape(Shape3,X,Y);

end;
6. Приведите окно в порядок.
Настройте размер окна (сейчас в нем слишком много свободного места);

Смените заголовок окна (form1 — явно не подходит);

Смените фоновый цвет окна

Запретите изменение размеров окна (чтобы огни светофора не пропадали из виду).

Разработала учитель информатики и ИКТ МОУ СОШ №5 Г.Азнакаево РТ Габдуллина Фарида Мирзагитовна