Skip to content

Commit 74d4b43

Browse files
Web 0.14.2: Java in der Konsole (Angeberwissen) und Grafiken in L20 repariert (#234)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ugz28WToQoMzLJgvHWUb3d
1 parent 3d6c9bb commit 74d4b43

13 files changed

Lines changed: 145 additions & 18 deletions

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ The format is loosely inspired by Keep a Changelog.
1515

1616
### Added
1717

18+
- **Web 0.14.2, Java in the console:** lesson 20 step „Wie Java auf jedem Computer läuft“ has a new Angeberwissen box on `java -version`, `javac Einmaleins.java` and `java Einmaleins`, plus the hint that a missing `javac -version` means only a JRE is installed (de/en/pt). Fix: the two diagrams in that step were missing their closing `:::`, so in 0.14.1 the text after the first diagram showed up as its caption; they now have short captions, and a new test flags overly long captions.
1819
- **Web 0.14.1, how Java runs on every computer:** lesson 20 has a new step „Wie Java auf jedem Computer läuft“ after „Snippet oder Class“: source code → compiler `javac` → bytecode (`.class`) → JVM on Windows/macOS/Linux, platform independence („Write once, run anywhere“), the JVM pictured as a small computer made of software (but a virtual machine, not an operating system), a table JRE vs. JDK, the JVM translating bytecode into machine code (JIT compiler), and a comparison with C++ (compiled directly to machine code, so once per system; second diagram l20-cpp.svg and a C++/Java table). New self-drawn diagram l20-jvm.svg (de/en/pt), the CAFEBABE Angeberwissen moved into the new step, three competences, three checklist lines and three quiz questions. Lesson 4 „Jetzt in Java“ points to lesson 20. New glossary entries Quellcode, Compiler, Bytecode, Maschinencode, JIT-Compiler, JVM, JRE, JDK, plattformunabhängig and Nachschlagen section „Java › Vom Code zum Programm“ (de/en/pt).
1920
- **Web 0.14.0, new world VisuFlow: draw flowcharts:** fourth world next to VisuStruct, VisuBot and VisuObject (…/app/?visuflow, colour violet, chosen at the start or in the gear menu; the world chooser now has two rows). Only drawing, no simulation and no code: drag the DIN 66001 symbols (Start, Anweisung, Ein-/Ausgabe, Verzweigung, Unterprogramm, Ende) from the bar onto the canvas, or tap a symbol to add it below the selected one, joined by an arrow; type the text right in the symbol (tap again or double click to change it). Drag an arrow from the dot at an exit to the next symbol; the diamond has the exits ja and nein (button „ja/nein tauschen“ swaps their sides), arrows run at right angles, loops go around on the right. Move with the mouse, finger or arrow keys on a 20 px grid, delete, undo/redo, title above the canvas, example „Tee kochen“ from lesson 1. Save and open as `.visuflow` file (the last plan stays in the browser), export as PNG, SVG or PDF (A4). Texts de/en/pt.
2021
- **Web 0.13.38, comments in Java:** lesson 6 has a new step „Kommentare im Code“ after „Jetzt in Java“: single-line `//` and multi-line `/* … */` comments, Java skips them and the structure chart stays the same; Javadoc `/** … */` is only mentioned. The IPO example (with „Im Editor öffnen“) shows the task in a multi-line comment, `// Eingabe`, `// Verarbeitung`, `// Ausgabe`, an explanation after a line, the expected output and a note for next time; plus a fill-in-the-gaps exercise, an Angeberwissen (PL/I 1964, BCPL 1967), a competence, a checklist line and two quiz questions. Lesson 14 marks closing brackets with `} // Ende if` / `} // Ende for`, lesson 20 the class frame with `} // Ende main` / `} // Ende Klasse`. New glossary entry Kommentar and Nachschlagen section „Java › Kommentare“ (de/en/pt).

‎web/lessons/de/20-java.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,12 +119,16 @@ Deine Datei `Einmaleins.java` ist **Quellcode**: Text für Menschen. Der Prozess
119119
2. Die **JVM** (Java Virtual Machine) liest den Bytecode und übersetzt ihn beim Ausführen in **Maschinencode**, also in Befehle für den Prozessor deines Computers.
120120

121121
::: grafik l20-jvm.svg
122+
Einmal kompilieren: Derselbe Bytecode läuft auf jeder JVM.
123+
:::
122124

123125
Den Bytecode gibt es nur einmal. Die JVM gibt es dagegen für Windows, macOS, Linux und viele andere Systeme. Deshalb läuft dieselbe `.class`-Datei auf jedem Computer, auf dem eine JVM installiert ist. Das nennt man **plattformunabhängig**. Der Werbespruch dazu heißt **„Write once, run anywhere“**: einmal schreiben, überall ausführen.
124126

125127
Zum Vergleich **C++**: Dort übersetzt der Compiler den Quellcode direkt in Maschinencode für genau einen Prozessor und ein Betriebssystem. Das fertige Programm läuft nur dort. Für Windows, macOS und Linux musst du es jeweils neu kompilieren.
126128

127129
::: grafik l20-cpp.svg
130+
C++ wird für jedes System einzeln zu Maschinencode kompiliert.
131+
:::
128132

129133
| | C++ | Java |
130134
|---|---|---|
@@ -145,6 +149,22 @@ Beim Installieren begegnen dir zwei Abkürzungen:
145149

146150
Zum Programmieren brauchst du also das JDK. Heute lädt man meist nur noch das JDK herunter, die JRE steckt darin. Für VisuStruct im Browser musst du nichts davon installieren.
147151

152+
::: angeberwissen
153+
Mit einem JDK kannst du alles auch selbst in der Konsole machen, also im Terminal oder in der Eingabeaufforderung:
154+
155+
```
156+
java -version
157+
javac Einmaleins.java
158+
java Einmaleins
159+
```
160+
161+
- `java -version` zeigt, welche Java-Version installiert ist. Kommt eine Fehlermeldung, fehlt Java noch.
162+
- `javac Einmaleins.java` startet den Compiler. Danach hast du zwei Dateien im Ordner: `Einmaleins.java` mit deinem Quellcode und neu `Einmaleins.class` mit dem Bytecode.
163+
- `java Einmaleins` startet die JVM mit deinem Bytecode. Den Klassennamen schreibst du hier ohne `.class`.
164+
165+
Klappt `java -version`, aber `javac -version` nicht, ist nur eine JRE installiert. Dann fehlt dir das JDK.
166+
:::
167+
148168
::: angeberwissen
149169
Jede übersetzte Java-Datei (`.class`) beginnt mit denselben vier Bytes, in Hexadezimal geschrieben: `CA FE BA BE`. Daran erkennt der Computer, dass es Java ist. Das „Kaffee-Baby“ hat sich James Gosling ausgedacht, passend zum Kaffee im Namen.
150170
:::

‎web/lessons/en/20-java.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,12 +119,16 @@ Your file `TimesTable.java` is **source code**: text for people. The processor i
119119
2. The **JVM** (Java Virtual Machine) reads the bytecode and, while running it, translates it into **machine code**: instructions for the processor in your computer.
120120

121121
::: grafik l20-jvm.svg
122+
Compile once: the same bytecode runs on every JVM.
123+
:::
122124

123125
There is only one bytecode. But there is a JVM for Windows, macOS, Linux and many other systems. That is why the same `.class` file runs on every computer that has a JVM installed. This is called **platform independent**. The slogan for it is **“Write once, run anywhere”**.
124126

125127
Compare this with **C++**: there the compiler translates the source code directly into machine code for exactly one processor and one operating system. The finished program only runs there. For Windows, macOS and Linux you have to compile it again each time.
126128

127129
::: grafik l20-cpp.svg
130+
C++ is compiled to machine code separately for every system.
131+
:::
128132

129133
| | C++ | Java |
130134
|---|---|---|
@@ -145,6 +149,22 @@ When you install Java you meet two abbreviations:
145149

146150
So to program you need the JDK. Today you usually only download the JDK, the JRE is inside it. For VisuStruct in the browser you don't need to install any of this.
147151

152+
::: angeberwissen
153+
With a JDK you can do all of this yourself in the console, that is in the terminal or the command prompt:
154+
155+
```
156+
java -version
157+
javac TimesTable.java
158+
java TimesTable
159+
```
160+
161+
- `java -version` shows which Java version is installed. If you get an error message, Java is still missing.
162+
- `javac TimesTable.java` starts the compiler. Afterwards there are two files in the folder: `TimesTable.java` with your source code and the new `TimesTable.class` with the bytecode.
163+
- `java TimesTable` starts the JVM with your bytecode. Here you write the class name without `.class`.
164+
165+
If `java -version` works but `javac -version` doesn't, only a JRE is installed. Then you are missing the JDK.
166+
:::
167+
148168
::: angeberwissen
149169
Every compiled Java file (`.class`) starts with the same four bytes, written in hexadecimal: `CA FE BA BE`. That is how the computer recognises it as Java. James Gosling came up with this “cafe babe”, to go with the coffee in the name.
150170
:::

‎web/lessons/pt/20-java.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,12 +119,16 @@ O teu ficheiro `Tabuada.java` é **código-fonte**: texto para pessoas. O proces
119119
2. A **JVM** (Java Virtual Machine, máquina virtual Java) lê o bytecode e, ao executá-lo, traduz-o em **código máquina**: instruções para o processador do teu computador.
120120

121121
::: grafik l20-jvm.svg
122+
Compilar uma vez: o mesmo bytecode corre em qualquer JVM.
123+
:::
122124

123125
O bytecode existe só uma vez. Já a JVM existe para Windows, macOS, Linux e muitos outros sistemas. Por isso, o mesmo ficheiro `.class` corre em qualquer computador que tenha uma JVM instalada. A isto chama-se **independente da plataforma**. O lema é **“Write once, run anywhere”**: escrever uma vez, executar em qualquer lado.
124126

125127
Compara com o **C++**: aí o compilador traduz o código-fonte diretamente em código máquina para um só processador e um só sistema operativo. O programa pronto só corre aí. Para Windows, macOS e Linux tens de o compilar de novo de cada vez.
126128

127129
::: grafik l20-cpp.svg
130+
O C++ é compilado para código máquina em separado para cada sistema.
131+
:::
128132

129133
| | C++ | Java |
130134
|---|---|---|
@@ -145,6 +149,22 @@ Ao instalar o Java, encontras duas siglas:
145149

146150
Para programar precisas, portanto, do JDK. Hoje em dia normalmente só se descarrega o JDK, o JRE vem lá dentro. Para usar o VisuStruct no browser não precisas de instalar nada disto.
147151

152+
::: angeberwissen
153+
Com um JDK podes fazer tudo isto tu próprio na consola, ou seja, no terminal ou na linha de comandos:
154+
155+
```
156+
java -version
157+
javac Tabuada.java
158+
java Tabuada
159+
```
160+
161+
- `java -version` mostra que versão do Java está instalada. Se aparecer uma mensagem de erro, ainda falta o Java.
162+
- `javac Tabuada.java` inicia o compilador. Depois tens dois ficheiros na pasta: o `Tabuada.java` com o teu código-fonte e o novo `Tabuada.class` com o bytecode.
163+
- `java Tabuada` inicia a JVM com o teu bytecode. Aqui escreves o nome da classe sem `.class`.
164+
165+
Se `java -version` funcionar mas `javac -version` não, só tens um JRE instalado. Nesse caso falta-te o JDK.
166+
:::
167+
148168
::: angeberwissen
149169
Todos os ficheiros Java compilados (`.class`) começam com os mesmos quatro bytes, escritos em hexadecimal: `CA FE BA BE`. É assim que o computador reconhece que é Java. Foi James Gosling que inventou este “cafe babe”, a condizer com o café do nome.
150170
:::

‎web/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "visustruct-web",
33
"private": true,
4-
"version": "0.14.1",
4+
"version": "0.14.2",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",

‎web/test/lessons.test.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@ describe.each(contentLanguages)('Lernbereich: Inhalte (%s)', (lang) => {
5151
}
5252
})
5353

54+
it('jede Grafik-Unterschrift ist kurz (sonst fehlt das schließende „:::“)', () => {
55+
for (const { where, block } of allBlocks()) {
56+
if (block.kind === 'graphic' || block.kind === 'images') expect(block.caption.length, `${where}: ${block.caption.slice(0, 60)}`).toBeLessThan(400)
57+
}
58+
})
59+
5460
it('keine Schleife in einem Diagramm ist leer (Inhalt gehört in <schleifeninhalt>)', () => {
5561
const loops = [ElementType.forSchleife, ElementType.whileSchleife, ElementType.doUntilSchleife, ElementType.endlosschleife]
5662
const check = (els: VSElement[], where: string) => {
Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)