You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit f33fe25
Browse filesBrowse the repository at this point in the historyBrowse files
Web 0.13.9: PAP in Lektion 1 ausführlicher, Nachteile mit GOTO (#205)
* Web 0.13.8: Schleife in Lektion 1 als gekipptes L
Statt „Klammer links“ heißt die Schleifenform im Struktogramm jetzt
„gekipptes L“ (en upside-down L, pt L invertido), im Text, im Vergleich
und im Wissenstest.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ugz28UN7HvRoMmJHmaecJn
* Web 0.13.9: PAP in Lektion 1 ausführlicher, Nachteile mit GOTO
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ugz28U3kz1Gn6VpW4ZHqDH
---------
Co-authored-by: Claude <noreply@anthropic.com>
Copy file name to clipboardExpand all lines: CHANGELOG.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,6 +8,7 @@ The format is loosely inspired by Keep a Changelog.
8
8
9
9
### Added
10
10
11
+
-**Web 0.13.9, flowchart in lesson 1 explained in more detail:** the old step „Andere Darstellungen: PAP und Pseudocode“ is now three steps. „Andere Darstellungen: Der PAP“ shows the tea Struktogramm again, then the same algorithm as PAP, its symbols and advantages (easy to read, flowcharts are used outside programming too). „Nachteile des PAP: Sprünge“ shows the tea example as a program with line numbers and GOTO, what goes wrong when one line is inserted, jumps out of loops and spaghetti code (Dijkstra moved here). „Pseudocode und Vergleich“ keeps pseudocode and the comparison. New checklist lines and a quiz question on GOTO; de/en/pt.
11
12
-**Web 0.13.8, loop in lesson 1 is a „gekipptes L“:** lesson 1 no longer calls the loop shape in the Struktogramm a „Klammer links“ but a „gekipptes L“ (condition on top, strip on the left), in the text, the comparison and the quiz (en „upside-down L“, pt „L invertido“).
12
13
-**Web 0.13.7, statements without class are coloured too:** when Programmieren shows the code without `class` and `main` (e.g. „Aufstehen;“, „Zähne putzen;“ in lesson 1), the statements now sit in a yellow block like a method, matching the yellow statements in the Struktogramm; loops and branches inside keep their own colours. Statements are now always yellow, also inside a loop or branch (own yellow stripe in the code, yellow box in the Struktogramm and in lesson 1); only the empty ø takes the colour of its block. A loop with pseudocode condition (`while (Tee noch zu heiß) {`) is coloured up to its closing brace.
13
14
-**Web 0.13.6, lesson header pinned at the top:** in a lesson step the header (← Alle Lektionen, lesson title, step numbers, step title) stays at the top of the lesson column with its own ← Zurück / Weiter → buttons next to „Alle Lektionen“; only the step content below scrolls. The buttons at the end of the step stay as well.
Copy file name to clipboardExpand all lines: web/lessons/de/01-was-ist-ein-struktogramm.md
+76-14Lines changed: 76 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -102,27 +102,85 @@ Die Kästen können auch **ineinander geschachtelt** werden: In einer Schleife o
102
102
Trostpflaster für alle mit einer verpatzten Arbeit: Die berühmte Fachzeitschrift *Communications of the ACM* hat den Struktogramm-Artikel abgelehnt. Laut Nassi meinte der Gutachter sogar, sie sollten alle Exemplare einsammeln und verbrennen. Autsch! Er erschien 1973 dann in einem kleineren Heft und wird heute tausendfach zitiert. Ätsch!
103
103
:::
104
104
105
-
## Andere Darstellungen: PAP und Pseudocode
105
+
## Andere Darstellungen: Der PAP
106
106
107
-
Ein Struktogramm ist nicht die einzige Art, einen Algorithmus aufzuschreiben. Zwei weitere wirst du im Unterricht treffen. Hier siehst du das Tee-Beispiel aus „Alle drei zusammen“ in allen drei Formen.
107
+
Es gibt noch zwei weitere Arten, Algorithmen darzustellen: den **Programmablaufplan**, kurz **PAP**, und den **Pseudocode**. Beide wirst du im Unterricht treffen.
108
108
109
-
### Struktogramm
109
+
Hier siehst du noch einmal unser Struktogramm zum Teetrinken aus „Alle drei zusammen“. Als Nächstes schauen wir uns den PAP an, und zwar mit demselben Beispiel.
110
110
111
111
::: diagramm l1-grundbausteine.visustruct
112
112
Das Tee-Beispiel als Struktogramm: erst die Tasse, dann die Verzweigung für den Zucker, dann die Schleife.
113
113
:::
114
114
115
-
### Programmablaufplan (PAP)
116
-
117
-
Der **Programmablaufplan**, kurz **PAP**, besteht aus Symbolen, die mit **Pfeilen** verbunden sind. Er ist nach DIN 66001 genormt. Eine Raute ist eine Verzweigung mit den Ausgängen ja und nein. Eine Schleife erkennst du daran, dass ein Pfeil **zurück nach oben** führt.
115
+
### Derselbe Algorithmus als PAP
118
116
119
117
::: grafik l01-pap.svg
120
118
Das Tee-Beispiel als Programmablaufplan. Der Pfeil von „1 Minute warten“ zurück nach oben bildet die Schleife.
121
119
:::
122
120
123
-
### Pseudocode
121
+
### Die Elemente
122
+
123
+
Ein PAP besteht aus wenigen Symbolen, die mit **Pfeilen** verbunden sind. Er ist nach DIN 66001 genormt.
124
+
125
+
-**Oval:** Start oder Ende. Jeder PAP hat genau einen Start und ein Ende.
126
+
-**Rechteck:** eine Anweisung, zum Beispiel *Tasse auf den Tisch stellen*.
127
+
-**Raute:** eine Verzweigung. In der Raute steht eine Frage, heraus führen zwei Pfeile: **ja** und **nein**.
128
+
-**Parallelogramm:** eine Ein- oder Ausgabe. Im Tee-Beispiel kommt sie nicht vor.
129
+
-**Pfeil:** zeigt, welcher Schritt als Nächstes kommt.
130
+
131
+
Eine Schleife hat im PAP kein eigenes Symbol. Du erkennst sie daran, dass ein Pfeil **zurück nach oben** führt.
132
+
133
+
### Die Vorteile
134
+
135
+
-**Sehr gut lesbar**, auch für Leute, die noch nie einen PAP gesehen haben. Man folgt einfach den Pfeilen mit dem Finger.
136
+
- Solche Pläne heißen allgemein **Flussdiagramm**, auf Englisch *flowchart*. Man benutzt sie nicht nur beim Programmieren, sondern überall, wo ein Ablauf erklärt wird: in Bedienungsanleitungen, bei der Fehlersuche („Leuchtet die Lampe? Nein: Steckt der Stecker?“) oder in Firmen für Arbeitsabläufe.
137
+
138
+
## Nachteile des PAP: Sprünge
139
+
140
+
Ein Pfeil im PAP darf von jedem Symbol zu jedem anderen führen. Das klingt praktisch, ist aber gefährlich.
124
141
125
-
**Pseudocode** ist Text, der wie ein Programm aussieht, aber in normaler Sprache geschrieben ist. Feste Wörter wie WENN und SOLANGE zeigen die Bausteine, die **Einrückung** zeigt, was dazugehört.
142
+
Früher hat man Programme genau so geschrieben. Jede Zeile hatte eine **Nummer**, und der Befehl **GOTO**, auf Deutsch „gehe zu“, sprang zu einer Zeilennummer. Jedes GEHE ZU ist ein Pfeil aus dem PAP. Unser Tee-Beispiel sähe so aus:
143
+
144
+
```
145
+
10 Tasse auf den Tisch stellen
146
+
20 WENN kein Zucker gewünscht, GEHE ZU 40
147
+
30 Zucker hineingeben
148
+
40 WENN Tee nicht zu heiß, GEHE ZU 70
149
+
50 1 Minute warten
150
+
60 GEHE ZU 40
151
+
70 Tee trinken
152
+
```
153
+
154
+
### Eine Zeile mehr, und schon springt es falsch
155
+
156
+
Jetzt verbesserst du den Algorithmus: Nach dem Zucker soll der Teebeutel heraus. Du fügst die neue Zeile 40 ein, und alle Zeilen darunter rutschen eine Nummer weiter. Die Sprünge zeigen aber noch auf die alten Nummern:
157
+
158
+
```
159
+
10 Tasse auf den Tisch stellen
160
+
20 WENN kein Zucker gewünscht, GEHE ZU 40
161
+
30 Zucker hineingeben
162
+
40 Teebeutel herausnehmen
163
+
50 WENN Tee nicht zu heiß, GEHE ZU 70
164
+
60 1 Minute warten
165
+
70 GEHE ZU 40
166
+
80 Tee trinken
167
+
```
168
+
169
+
Spiel es durch: Zeile 70 schickt dich nicht mehr zur Prüfung in Zeile 50, sondern zum Teebeutel. Und wenn der Tee kühl genug ist, springt Zeile 50 zu Zeile 70 und nicht mehr zu *Tee trinken*. Du nimmst also immer wieder den Teebeutel heraus und trinkst nie. Bei jeder Änderung musst du jedes GEHE ZU prüfen. In einem großen Programm mit Hunderten Sprüngen geht dabei leicht etwas schief.
170
+
171
+
### Kreuz und quer: Spaghetticode
172
+
173
+
Mit Pfeilen kann man auch mitten aus einer Schleife herausspringen oder von außen mitten in eine Schleife hinein. Solche **Aussprünge** und Einsprünge machen den Plan schnell unübersichtlich. Bei vielen Sprüngen kreuzen sich die Pfeile, bis der Plan aussieht wie ein Teller Spaghetti. Deshalb nennt man das **Spaghetticode**. Den Ablauf kann man kaum noch verfolgen, und Fehler verstecken sich gut.
174
+
175
+
Im Struktogramm gibt es keine Pfeile. Fügst du einen Kasten ein, rutscht alles darunter einfach mit, und kein Sprung kann auf die falsche Stelle zeigen. Für das vorzeitige Verlassen einer Schleife gibt es dort einen eigenen, ordentlichen Kasten, den Aussprung. Den lernst du in Lektion 18 kennen.
176
+
177
+
::: angeberwissen
178
+
1968 schrieb der Informatiker Edsger Dijkstra einen berühmten Brief: „Go To Statement Considered Harmful“, auf Deutsch „GOTO gilt als schädlich“. Seitdem baut man Programme nur noch aus Sequenz, Verzweigung und Wiederholung. In Java ist `goto` bis heute ein reserviertes Wort, benutzen darf man es aber nicht. Mäh, Spaghetti esse ich lieber, als sie zu programmieren.
179
+
:::
180
+
181
+
## Pseudocode und Vergleich
182
+
183
+
**Pseudocode** ist Text, der wie ein Programm aussieht, aber in normaler Sprache geschrieben ist. Feste Wörter wie WENN und SOLANGE zeigen die Bausteine, die **Einrückung** zeigt, was dazugehört. Sprünge gibt es auch hier nicht. Das ist unser Tee-Beispiel:
126
184
127
185
```
128
186
Tasse auf den Tisch stellen
@@ -138,7 +196,7 @@ Tee trinken
138
196
### Im Vergleich
139
197
140
198
-**Struktogramm:** Kästen ineinander, die Schleife ist ein gekipptes L. Die Struktur siehst du auf einen Blick, wilde Sprünge sind unmöglich.
141
-
-**PAP:** Symbole mit Pfeilen, die Schleife ist ein Pfeil zurück nach oben. Sehr anschaulich, aber bei großen Plänen schnell unübersichtlich.
199
+
-**PAP:** Symbole mit Pfeilen, die Schleife ist ein Pfeil zurück nach oben. Sehr anschaulich, aber bei großen Plänen schnell unübersichtlich, und Sprünge kreuz und quer sind möglich.
142
200
-**Pseudocode:** Text mit Einrückung, die Schleife steht zwischen SOLANGE und ENDE SOLANGE. Schnell geschrieben und schon nah am Programmcode.
143
201
144
202
> Alle drei beschreiben denselben Algorithmus. Wenn du eine Form lesen kannst, lernst du die anderen schnell.
@@ -156,10 +214,6 @@ Beim Programmieren passieren zwei Dinge gleichzeitig: Du musst dir den Ablauf ü
156
214
157
215
Mit der **Simulation** kannst du dein Struktogramm außerdem Schritt für Schritt ausführen und prüfen, ob es wirklich tut, was es soll.
158
216
159
-
::: angeberwissen
160
-
Programme, die kreuz und quer springen, heißen **Spaghetticode**: Wer einem Faden folgen will, verheddert sich wie in einem Teller Spaghetti. Schuld war früher der Befehl GOTO, also „springe zu Zeile …“. 1968 schrieb der Informatiker Edsger Dijkstra deshalb einen berühmten Brief: „Go To Statement Considered Harmful“, auf Deutsch „GOTO gilt als schädlich“. Seitdem baut man Programme nur noch aus Sequenz, Verzweigung und Wiederholung. In Java ist `goto` bis heute ein reserviertes Wort, benutzen darf man es aber nicht. Mäh, Spaghetti esse ich lieber, als sie zu programmieren.
161
-
:::
162
-
163
217
## Spiel: Welcher Baustein?
164
218
165
219
::: spiel frage
@@ -215,7 +269,9 @@ richtig: Verzweigung
215
269
- Ich weiß, dass ein Struktogramm von oben nach unten gelesen wird. → So liest du ein Struktogramm
216
270
- Ich kenne die drei Grundbausteine Sequenz, Verzweigung und Wiederholung. → Baustein 1: Die Sequenz
217
271
- Ich erkenne jeden Baustein im Struktogramm an seiner Form. → Alle drei zusammen
218
-
- Ich kann einen einfachen Algorithmus auch als PAP und als Pseudocode lesen. → Andere Darstellungen: PAP und Pseudocode
272
+
- Ich kenne die Elemente eines PAP und kann einen einfachen PAP lesen. → Andere Darstellungen: Der PAP
273
+
- Ich kann erklären, warum Sprünge mit GOTO zu Fehlern und Spaghetticode führen. → Nachteile des PAP: Sprünge
274
+
- Ich kann einen einfachen Algorithmus auch als Pseudocode lesen. → Pseudocode und Vergleich
219
275
:::
220
276
221
277
## Wissenstest
@@ -265,6 +321,12 @@ richtig: Verzweigung
265
321
= Parallelogramm -> Ein- oder Ausgabe
266
322
> Die Raute hat zwei Ausgänge: ja und nein.
267
323
324
+
? Du fügst in ein Programm mit GOTO eine neue Zeile ein. Was kann passieren?
325
+
-[x] Die Sprünge zeigen auf die falschen Zeilen, weil sich die Nummern verschoben haben
326
+
-[ ] Nichts, die Sprünge passen sich von selbst an
327
+
-[ ] Das Programm wird automatisch schneller
328
+
> Jedes GEHE ZU zeigt auf eine feste Zeilennummer. Rutschen die Zeilen weiter, springt das Programm an die falsche Stelle.
329
+
268
330
? Was zeigt im Pseudocode, welche Zeilen zu einer Schleife gehören?
Copy file name to clipboardExpand all lines: web/lessons/en/01-was-ist-ein-struktogramm.md
+76-14Lines changed: 76 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -102,27 +102,85 @@ The boxes can also be **nested** inside each other: a loop or a path can contain
102
102
Comfort for anyone who has messed up a test: the famous journal *Communications of the ACM* rejected the structure chart article. According to Nassi, the reviewer even said they should collect every copy and burn it. Ouch! It then appeared in 1973 in a smaller journal and today it is quoted thousands of times. Ha!
103
103
:::
104
104
105
-
## Other ways to draw it: flowchart and pseudocode
105
+
## Other ways to draw it: the flowchart
106
106
107
-
A structure chart is not the only way to write down an algorithm. You will meet two more in class. Here you see the tea example from “All three together” in all three forms.
107
+
There are two more ways to show an algorithm: the **flowchart** and **pseudocode**. You will meet both in class.
108
108
109
-
### Structure chart
109
+
Here you see our structure chart for drinking tea from “All three together” once more. Next we look at the flowchart, using the same example.
110
110
111
111
::: diagramm l1-grundbausteine.visustruct
112
112
The tea example as a structure chart: first the cup, then the branch for the sugar, then the loop.
113
113
:::
114
114
115
-
### Flowchart
116
-
117
-
A **flowchart** is made of symbols joined by **arrows**. It is standardised as DIN 66001 (ISO 5807). A diamond is a decision with the exits yes and no. You recognise a loop by an arrow that leads **back up**.
115
+
### The same algorithm as a flowchart
118
116
119
117
::: grafik l01-pap.svg
120
118
The tea example as a flowchart. The arrow from “Wait 1 minute” back up forms the loop.
121
119
:::
122
120
123
-
### Pseudocode
121
+
### The symbols
122
+
123
+
A flowchart is made of a few symbols joined by **arrows**. It is standardised as DIN 66001 (ISO 5807).
124
+
125
+
-**Oval:** start or end. Every flowchart has exactly one start and one end.
126
+
-**Rectangle:** a statement, for example *Put a cup on the table*.
127
+
-**Diamond:** a decision. The diamond holds a question, and two arrows lead out of it: **yes** and **no**.
128
+
-**Parallelogram:** an input or output. The tea example does not have one.
129
+
-**Arrow:** shows which step comes next.
130
+
131
+
A loop has no symbol of its own in a flowchart. You recognise it by an arrow that leads **back up**.
132
+
133
+
### The advantages
134
+
135
+
-**Very easy to read**, even for people who have never seen a flowchart. You simply follow the arrows with your finger.
136
+
- Flowcharts are not only used in programming but wherever a process is explained: in user manuals, for troubleshooting (“Is the lamp on? No: is it plugged in?”) or in companies for work processes.
137
+
138
+
## Drawbacks of the flowchart: jumps
139
+
140
+
An arrow in a flowchart may lead from any symbol to any other. That sounds handy, but it is dangerous.
124
141
125
-
**Pseudocode** is text that looks like a program but is written in plain language. Fixed words such as IF and WHILE show the building blocks, and the **indentation** shows what belongs to them.
142
+
In the old days, programs were written exactly like that. Every line had a **number**, and the command **GOTO** jumped to a line number. Every GOTO is an arrow from the flowchart. Our tea example would look like this:
143
+
144
+
```
145
+
10 Put a cup on the table
146
+
20 IF no sugar wanted, GOTO 40
147
+
30 Add sugar
148
+
40 IF tea not too hot, GOTO 70
149
+
50 Wait 1 minute
150
+
60 GOTO 40
151
+
70 Drink the tea
152
+
```
153
+
154
+
### One more line, and the jumps go wrong
155
+
156
+
Now you improve the algorithm: after the sugar, the tea bag should come out. You insert the new line 40, and all lines below move down one number. But the jumps still point to the old numbers:
157
+
158
+
```
159
+
10 Put a cup on the table
160
+
20 IF no sugar wanted, GOTO 40
161
+
30 Add sugar
162
+
40 Take out the tea bag
163
+
50 IF tea not too hot, GOTO 70
164
+
60 Wait 1 minute
165
+
70 GOTO 40
166
+
80 Drink the tea
167
+
```
168
+
169
+
Play it through: line 70 no longer sends you to the check in line 50 but to the tea bag. And when the tea is cool enough, line 50 jumps to line 70 instead of *Drink the tea*. So you keep taking out the tea bag and never drink. With every change you have to check every GOTO. In a big program with hundreds of jumps, something easily goes wrong.
170
+
171
+
### All over the place: spaghetti code
172
+
173
+
With arrows you can also jump out of the middle of a loop, or from outside into the middle of a loop. Such jumps quickly make the chart confusing. With many jumps the arrows cross until the chart looks like a plate of spaghetti. That is why it is called **spaghetti code**. You can hardly follow the flow any more, and mistakes hide well.
174
+
175
+
A structure chart has no arrows. If you insert a box, everything below simply moves down with it, and no jump can point to the wrong place. For leaving a loop early there is a separate, tidy box, the break. You will meet it in lesson 18.
176
+
177
+
::: angeberwissen
178
+
In 1968 the computer scientist Edsger Dijkstra wrote a famous letter: “Go To Statement Considered Harmful”. Since then, programs are built only from sequence, branch and loop. In Java, `goto` is still a reserved word today, but you are not allowed to use it. Baah, I would rather eat spaghetti than program it.
179
+
:::
180
+
181
+
## Pseudocode and comparison
182
+
183
+
**Pseudocode** is text that looks like a program but is written in plain language. Fixed words such as IF and WHILE show the building blocks, and the **indentation** shows what belongs to them. There are no jumps here either. This is our tea example:
126
184
127
185
```
128
186
Put a cup on the table
@@ -138,7 +196,7 @@ Drink the tea
138
196
### Compared
139
197
140
198
-**Structure chart:** boxes inside boxes, the loop is an upside-down L. You see the structure at a glance, and wild jumps are impossible.
141
-
-**Flowchart:** symbols with arrows, the loop is an arrow back up. Very easy to picture, but big charts quickly get confusing.
199
+
-**Flowchart:** symbols with arrows, the loop is an arrow back up. Very easy to picture, but big charts quickly get confusing, and jumps all over the place are possible.
142
200
-**Pseudocode:** text with indentation, the loop sits between WHILE and END WHILE. Quick to write and already close to program code.
143
201
144
202
> All three describe the same algorithm. Once you can read one form, you learn the others quickly.
@@ -156,10 +214,6 @@ When you program, two things happen at once: you have to think about the steps a
156
214
157
215
With the **simulation** you can also run your structure chart step by step and check whether it really does what it should.
158
216
159
-
::: angeberwissen
160
-
Programs that jump all over the place are called **spaghetti code**: if you try to follow one thread, you get tangled up like in a plate of spaghetti. In the old days the culprit was the GOTO command, meaning “jump to line …”. So in 1968 the computer scientist Edsger Dijkstra wrote a famous letter: “Go To Statement Considered Harmful”. Since then, programs are built only from sequence, branch and loop. In Java, `goto` is still a reserved word today, but you are not allowed to use it. Baah, I would rather eat spaghetti than program it.
161
-
:::
162
-
163
217
## Game: Which building block?
164
218
165
219
::: spiel frage
@@ -215,7 +269,9 @@ richtig: branch
215
269
- I know that a structure chart is read from top to bottom. → How to read a structure chart
216
270
- I know the three basic building blocks: sequence, branch and loop. → Building block 1: the sequence
217
271
- I can recognise every building block in a structure chart by its shape. → All three together
218
-
- I can also read a simple algorithm as a flowchart and as pseudocode. → Other ways to draw it: flowchart and pseudocode
272
+
- I know the symbols of a flowchart and can read a simple flowchart. → Other ways to draw it: the flowchart
273
+
- I can explain why jumps with GOTO lead to mistakes and spaghetti code. → Drawbacks of the flowchart: jumps
274
+
- I can also read a simple algorithm as pseudocode. → Pseudocode and comparison
219
275
:::
220
276
221
277
## Quiz
@@ -265,6 +321,12 @@ richtig: branch
265
321
= Parallelogram -> Input or output
266
322
> The diamond has two exits: yes and no.
267
323
324
+
? You insert a new line into a program with GOTO. What can happen?
325
+
-[x] The jumps point to the wrong lines because the numbers have moved
326
+
-[ ] Nothing, the jumps adjust by themselves
327
+
-[ ] The program automatically gets faster
328
+
> Every GOTO points to a fixed line number. If the lines move down, the program jumps to the wrong place.
329
+
268
330
? In pseudocode, what shows which lines belong to a loop?
0 commit comments