Flowcharts. Graphically representing the path of the program

Transcription

1 Flowcharts Graphically representing the path of the program

2 You ve maybe seen some of the joke flowcharts.

3 The Birthday Card that I got my sister.

4 On the back:

5

6 That s not what we are making.

7 Flowcharts are part of the program process.

8 Flowcharts are also useful to help you visualize the flow of a program.

9 An example: Start onevent("button1", "click", function(event) { Get Age var Age = promptnum ("Enter your age: "); YrsToVote = 18-Age var YrsToVote = 18 - Age; Wait + YrsToVote settext("answer", "Wait "+YrsToVote); End

10 Shape Formal: informal Rules Terminal: start, end Input/Output: prompt, promptnum keyboard input Process: calculations Display: output, settext There is only one start and one end. Arrows connect the pieces. Flow is up to down or left to right. Lines do not cross. The only shape with can have 2 lines come out of it is a diamond. No shape can have more than 2 lines come out of it.

11 input calculation display output start/end

12 var Mark = promptnum ("What was your test mark? "); var Total = promptnum ("What was the test total? "); var Per = Mark/Total*100; settext("per", "That was "+Per+"%"); settext("msg", "Good job"); Start at the beginning

13 var Mark = promptnum ("What was your test mark? "); var Total = promptnum ("What was the test total? "); Start var Per = Mark/Total*100; settext("per", "That was "+Per+"%"); settext("msg", "Good job"); What shape works for the next line?

14 var Mark = promptnum ("What was your test mark? "); var Total = promptnum ("What was the test total? "); Start Get test mark var Per = Mark/Total*100; settext("per", "That was "+Per+"%"); settext("msg", "Good job"); And line two?

15 var Mark = promptnum ("What was your test mark? "); var Total = promptnum ("What was the test total? "); var Per = Mark/Total*100; Start Get test mark Get test total settext("per", "That was "+Per+"%"); settext("msg", "Good job"); What happens inbetween line 2 & 3?

16 var Mark = promptnum ("What was your test mark? "); var Total = promptnum ("What was the test total? "); var Per = Mark/Total*100; settext("per", "That was "+Per+"%"); settext("msg", "Good job"); What shape is needed for line 3? Start Get test mark Get test total Calculate percentage

17 var Mark = promptnum ("What was your test mark? "); var Total = promptnum ("What was the test total? "); var Per = Mark/Total*100; settext("per", "That was "+Per+"%"); settext("msg", "Good job"); What shape for line 4? Start Get test mark Get test total Calculate percentage Print percentage

18 var Mark = promptnum ("What was your test mark? "); var Total = promptnum ("What was the test total? "); var Per = Mark/Total*100; settext("per", "That was "+Per+"%"); settext("msg", "Good job"); How does it end? Start Get test mark Get test total Calculate percentage Print percentage Print Good Job

19 var Mark = promptnum ("What was your test mark? "); var Total = promptnum ("What was the test total? "); var Per = Mark/Total*100; settext("per", "That was "+Per+"%"); settext("msg", "Good job"); That s all. Start Get test mark Get test total Calculate percentage Print percentage Print Good Job Gold star End

20 Let s try another.

21 settext("title", "Cylinder Surface Area and Volume"); var Height = promptnum ("Enter the height: "); var Radius = promptnum ("Enter the radius: "); var SA = 3.14*Radius*Radius*2 + Radius*Height; var Volume = 3.14*Radius*Radius*Height; settext("sa", "The surface area is "+SA); settext("vol", "The volume area is "+Vol); Start at the beginning

22 settext("title", "Cylinder Surface Area and Volume"); var Height = promptnum ("Enter the height: "); var Radius = promptnum ("Enter the radius: "); var SA = 3.14*Radius*Radius*2 + Radius*Height; var Volume = 3.14*Radius*Radius*Height; settext("sa", "The surface area is "+SA); settext("vol", "The volume area is "+Vol); What shape is line 1? Start

23 settext("title", "Cylinder Surface Area and Volume"); var Height = promptnum ("Enter the height: "); var Radius = promptnum ("Enter the radius: "); var SA = 3.14*Radius*Radius*2 + Radius*Height; var Volume = 3.14*Radius*Radius*Height; settext("sa", "The surface area is "+SA); settext("vol", "The volume area is "+Vol); What shape are the next 2 lines? (2&3) Start Print title

24 settext("title", "Cylinder Surface Area and Volume"); var Height = promptnum ("Enter the height: "); var Radius = promptnum ("Enter the radius: "); var SA = 3.14*Radius*Radius*2 + Radius*Height; var Volume = 3.14*Radius*Radius*Height; settext("sa", "The surface area is "+SA); settext("vol", "The volume area is "+Vol); What about the last two lines? Start Print title Get height Get radius

25 settext("title", "Cylinder Surface Area and Volume"); var Height = promptnum ("Enter the height: "); var Radius = promptnum ("Enter the radius: "); var SA = 3.14*Radius*Radius*2 + Radius*Height; var Volume = 3.14*Radius*Radius*Height; settext("sa", "The surface area is "+SA); settext("vol", "The volume area is "+Vol); Start Print title Get height Get radius Hey! Where did those two numbers come from? Oh yeah. We missed a step. Print volume Print surface area

26 settext("title", "Cylinder Surface Area and Volume"); var Height = promptnum ("Enter the height: "); var Radius = promptnum ("Enter the radius: "); var SA = 3.14*Radius*Radius*2 + Radius*Height; var Volume = 3.14*Radius*Radius*Height; settext("sa", "The surface area is "+SA); settext("vol", "The volume area is "+Vol); Then, what shape to end it? Start Print title Get height Get radius Calculate surface area Print volume Print surface area Calculate volume

27 settext("title", "Cylinder Surface Area and Volume"); var Height = promptnum ("Enter the height: "); var Radius = promptnum ("Enter the radius: "); var SA = 3.14*Radius*Radius*2 + Radius*Height; var Volume = 3.14*Radius*Radius*Height; settext("sa", "The surface area is "+SA); settext("vol", "The volume area is "+Vol); Gold star That s all. Start Print title Get height Get radius Calculate surface area End Print volume Print surface area Calculate volume

28 This diagram was drawn by an amateur: how many of the rules did they break? Rules There is only one start and one end. Arrows connect the pieces. Flow is up to down or left to right. Lines do not cross. The only shape with can have 2 lines come out of it is a diamond. No shape can have more than 2 lines come out of it.