Füge Kapitel 04b zum Umstieg von Thonny auf VS Code mit Plugins, Shortcuts und Test-Playground hinzu
This commit is contained in:
parent
b0e53d3e09
commit
cd8cf471bf
8 changed files with 497 additions and 14 deletions
|
|
@ -195,7 +195,7 @@
|
|||
|
||||
<div class="footer-nav">
|
||||
<a href="../03_methoden_und_verhalten/index.html" class="btn btn-secondary">← Zurück zu Kapitel 03</a>
|
||||
<a href="../05_objekte_kombinieren/index.html" class="btn">Weiter zu Kapitel 05 →</a>
|
||||
<a href="../04b_umstieg_vscode/index.html" class="btn">Weiter zu Kapitel 04b: VS Code 🚀 →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
58
04b_umstieg_vscode/README.md
Normal file
58
04b_umstieg_vscode/README.md
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
# Kapitel 04b: Umstieg von Thonny auf Visual Studio Code (VS Code) 🚀💻
|
||||
|
||||
Herzlich willkommen zum Exkurs!
|
||||
|
||||
Bisher hast du deine Aufgaben vielleicht in **Thonny** bearbeitet. Thonny ist super für die ersten Schritte. Aber ab jetzt werden unsere Projekte größer (mehrere Dateien, Klassen, Tests).
|
||||
|
||||
**Visual Studio Code (VS Code)** ist die beliebteste und mächtigste Entwicklungsumgebung der Welt. Hier lernst du, wie du sie einrichtest und wie ein Profi nutzt!
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Das wichtigste Grundkonzept: "Ordner öffnen" (Open Folder)
|
||||
|
||||
- In Thonny öffnet man meistens nur einzelne Dateien (wie `aufgabe.py`).
|
||||
- In **VS Code öffnet man immer den gesamten Projektordner**:
|
||||
1. Starte VS Code.
|
||||
2. Klicke auf **Datei → Ordner öffnen...** (oder `Strg + K`, dann `Strg + O` / auf Mac: `Cmd + O`).
|
||||
3. Wähle den Ordner `Aufgaben-Python` aus.
|
||||
|
||||
Jetzt hast du links im Explorer die volle Übersicht über alle Kapitel!
|
||||
|
||||
---
|
||||
|
||||
## 🧩 Die besten Erweiterungen (Extensions)
|
||||
|
||||
Drücke `Strg + Shift + X` (Mac: `Cmd + Shift + X`), um den Erweiterungs-Store zu öffnen. Installiere folgende Plugins:
|
||||
|
||||
1. **Python & Pylance (von Microsoft):**
|
||||
Aktiviert Autovervollständigung (IntelliSense), Syntaxprüfung und den Ausführen-Button.
|
||||
2. **Error Lens (⭐ Geheimtipp!):**
|
||||
Zeigt Fehler und Warnungen direkt als Text in der Codezeile an! Du musst nicht erst lange im Terminal nach Zeilennummern suchen.
|
||||
3. **Material Icon Theme:**
|
||||
Hübsche, bunte Datei-Symbole für Python, Markdown, HTML und Git.
|
||||
4. **Better Comments:**
|
||||
Färbt `# TODO`, `# !` und `# ?` farblich ein.
|
||||
5. **Black Formatter:**
|
||||
Formatiert deinen Code beim Speichern automatisch sauber und ordentlich.
|
||||
|
||||
---
|
||||
|
||||
## ⌨️ Die wichtigsten Tastenkombinationen (Shortcuts)
|
||||
|
||||
| Aktion | Windows / Linux | macOS |
|
||||
| :--- | :--- | :--- |
|
||||
| **Datei speichern** | `Strg + S` | `Cmd + S` |
|
||||
| **Terminal öffnen / schließen** | `Strg + \`` (oder `Strg + J`) | `Cmd + \`` (oder `Cmd + J`) |
|
||||
| **Command Palette (Befehle suchen)** | `Strg + Shift + P` | `Cmd + Shift + P` |
|
||||
| **Code formatieren** | `Alt + Shift + F` | `Option + Shift + F` |
|
||||
| **Nächstes gleiches Wort markieren** | `Strg + D` | `Cmd + D` |
|
||||
| **Skript ausführen** | `Strg + F5` (oder Play-Button oben) | `Cmd + F5` |
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Ausprobieren in `vscode_test.py`
|
||||
|
||||
Öffne `vscode_test.py` in VS Code und teste:
|
||||
1. Wie **Error Lens** Fehler in Echtzeit anzeigt.
|
||||
2. Wie **IntelliSense** Methoden vorschlägt, wenn du `auto.` tippst.
|
||||
3. Öffne das Terminal mit `Strg + \`` und führe `python3 test_all.py` aus!
|
||||
274
04b_umstieg_vscode/index.html
Normal file
274
04b_umstieg_vscode/index.html
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kapitel 04b: Umstieg auf Visual Studio Code</title>
|
||||
<link rel="stylesheet" href="../assets/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<nav class="nav-links">
|
||||
<a href="../index.html">🏠 Zur Kursübersicht</a>
|
||||
<span>›</span>
|
||||
<a href="../04_str_und_darstellung/index.html">Kapitel 04</a>
|
||||
<span>›</span>
|
||||
<span style="color: white; font-weight: 600;">Kapitel 04b (VS Code)</span>
|
||||
<span>›</span>
|
||||
<a href="../05_objekte_kombinieren/index.html">Kapitel 05 →</a>
|
||||
</nav>
|
||||
<div class="header-badge">Exkurs & Praxissprung</div>
|
||||
<h1>Umstieg von Thonny auf Visual Studio Code 🚀💻</h1>
|
||||
<p>Willkommen in der Profi-Entwicklungsumgebung! Lerne die besten Plugins, Shortcuts und Arbeitsabläufe kennen.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
|
||||
<!-- 1. Warum wechseln? -->
|
||||
<section class="card">
|
||||
<h2>1. Warum wechseln wir von Thonny zu VS Code?</h2>
|
||||
|
||||
<p>
|
||||
<strong>Thonny</strong> war für den Anfang genial: Es ist einfach, hat einen Variablen-Inspektor und man kann Zeile für Zeile durch ein Skript gehen.
|
||||
</p>
|
||||
<p>
|
||||
Doch je größer deine Projekte werden (mehrere Dateien, Klassen, Tests und Git), desto mehr stößt Thonny an seine Grenzen. <strong>Visual Studio Code (VS Code)</strong> ist der weltweite Standard in der professionellen Softwareentwicklung.
|
||||
</p>
|
||||
|
||||
<div class="box box-analogie">
|
||||
<div class="box-title">🏎️ Vom Fahrschulauto zum Rennwagen:</div>
|
||||
<ul>
|
||||
<li><strong>Thonny</strong> ist das Fahrschulauto mit Doppelpedalen – perfekt für die ersten Fahrstunden auf dem Parkplatz.</li>
|
||||
<li><strong>VS Code</strong> ist ein modernes Sportauto mit Navi, Spurhalteassistent, Tempomat und Turbolader. Es hilft dir beim Tippen, findet Fehler automatisch und macht das Coden viel schneller!</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3>Die 4 größten Vorteile von VS Code:</h3>
|
||||
<ul style="margin-left: 20px; margin-top: 10px;">
|
||||
<li style="margin-bottom: 6px;"><strong>IntelliSense:</strong> Schlägt dir automatisch Methoden und Variablennamen vor (kein Vertippen mehr!).</li>
|
||||
<li style="margin-bottom: 6px;"><strong>Projekt-Ordner:</strong> Du siehst alle Dateien deines Projekts auf einen Blick in der Seitenleiste.</li>
|
||||
<li style="margin-bottom: 6px;"><strong>Integriertes Terminal:</strong> Führe Tests und Skripte direkt im Editor aus, ohne Fenster zu wechseln.</li>
|
||||
<li style="margin-bottom: 6px;"><strong>Tausende Erweiterungen:</strong> Passe VS Code mit Themes, Formatierern und Fehleranzeigen perfekt an dich an.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 2. Wichtigstes Grundkonzept: Open Folder -->
|
||||
<section class="card">
|
||||
<h2>2. Das wichtigste Grundkonzept: "Ordner öffnen" (Open Folder)</h2>
|
||||
|
||||
<div class="box box-warning">
|
||||
<div class="box-title">⚠️ Wichtigster Unterschied zu Thonny:</div>
|
||||
In Thonny hat man meist nur eine einzelne Datei geöffnet (z.B. <code>aufgabe.py</code>).<br>
|
||||
In <strong>VS Code öffnet man immer den gesamten Projektordner</strong> (z.B. <code>Aufgaben-Python</code>)!
|
||||
</div>
|
||||
|
||||
<h3>So öffnest du dein Projekt richtig:</h3>
|
||||
<ol style="margin-left: 20px; margin-top: 10px;">
|
||||
<li style="margin-bottom: 8px;">Starte <strong>Visual Studio Code</strong>.</li>
|
||||
<li style="margin-bottom: 8px;">Klicke im Menü oben auf <strong>Datei → Ordner öffnen...</strong> (oder <kbd>Strg</kbd> + <kbd>K</kbd>, dann <kbd>Strg</kbd> + <kbd>O</kbd> / auf Mac: <kbd>Cmd</kbd> + <kbd>O</kbd>).</li>
|
||||
<li style="margin-bottom: 8px;">Wähle den Hauptordner <code>Aufgaben-Python</code> aus und klicke auf <strong>Öffnen</strong>.</li>
|
||||
<li style="margin-bottom: 8px;">Bestätige eventuell die Frage <em>"Vertrauen Sie den Autoren?"</em> mit <strong>Ja</strong>.</li>
|
||||
</ol>
|
||||
<p style="margin-top: 10px;">Jetzt siehst du links im Explorer alle Kapitelordner, Tests und Dateien sauber aufgelistet!</p>
|
||||
</section>
|
||||
|
||||
<!-- 3. Die besten Plugins / Extensions -->
|
||||
<section class="card">
|
||||
<h2>3. 🧩 Die unverzichtbaren Erweiterungen (Plugins)</h2>
|
||||
|
||||
<p>
|
||||
Um Erweiterungen zu installieren, klicke ganz links in der Seitenleiste auf das <strong>Erweiterungs-Icon</strong> (die vier Quadrate mit einem fliegenden Würfel) oder drücke <kbd>Strg</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> (Mac: <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd>).
|
||||
</p>
|
||||
|
||||
<div class="extension-grid">
|
||||
|
||||
<!-- Python -->
|
||||
<div class="extension-card">
|
||||
<div class="extension-icon">🐍</div>
|
||||
<div class="extension-info">
|
||||
<h4>Python (von Microsoft)</h4>
|
||||
<p><strong>Pflicht-Plugin!</strong> Aktiviert Syntax-Highlighting, Code-Ausführung, IntelliSense und Debugging.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pylance -->
|
||||
<div class="extension-card">
|
||||
<div class="extension-icon">⚡</div>
|
||||
<div class="extension-info">
|
||||
<h4>Pylance (von Microsoft)</h4>
|
||||
<p>Macht die Autovervollständigung blitzschnell und warnt dich sofort bei falschen Typen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Lens -->
|
||||
<div class="extension-card" style="border: 2px solid var(--primary);">
|
||||
<div class="extension-icon">🔍</div>
|
||||
<div class="extension-info">
|
||||
<h4>Error Lens <span style="font-size: 0.75rem; background: var(--primary); color: white; padding: 2px 6px; border-radius: 10px;">Geheimtipp!</span></h4>
|
||||
<p>Zeigt Fehler und Warnungen <strong>direkt als farbigen Text in der Codezeile</strong> an – kein Suchen im Terminal nötig!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Material Icon Theme -->
|
||||
<div class="extension-card">
|
||||
<div class="extension-icon">🎨</div>
|
||||
<div class="extension-info">
|
||||
<h4>Material Icon Theme</h4>
|
||||
<p>Verleiht Python-, HTML- und Git-Dateien im Explorer hübsche und bunte Symbole.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Better Comments -->
|
||||
<div class="extension-card">
|
||||
<div class="extension-icon">💬</div>
|
||||
<div class="extension-info">
|
||||
<h4>Better Comments</h4>
|
||||
<p>Färbt Kommentare ein: <code># TODO:</code> wird orange, <code># !</code> wird rot, <code># ?</code> wird blau.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Black Formatter -->
|
||||
<div class="extension-card">
|
||||
<div class="extension-icon">🪄</div>
|
||||
<div class="extension-info">
|
||||
<h4>Black Formatter</h4>
|
||||
<p>Formatiert deinen Code beim Speichern (<kbd>Strg</kbd>+<kbd>S</kbd>) automatisch nach den offiziellen Python-Regeln.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. Die Oberfläche verstehen -->
|
||||
<section class="card">
|
||||
<h2>4. 🖥️ Die Benutzeroberfläche im Überblick</h2>
|
||||
|
||||
<ul style="margin-left: 20px;">
|
||||
<li style="margin-bottom: 12px;">
|
||||
<strong>Seitenleiste links:</strong>
|
||||
<br>📁 <strong>Explorer:</strong> Dateibaum durchsuchen.
|
||||
<br>🔍 <strong>Suche:</strong> Text im gesamten Projekt finden.
|
||||
<br>🌿 <strong>Quellcodeverwaltung:</strong> Git Commits & Pushes.
|
||||
<br>🧩 <strong>Erweiterungen:</strong> Neue Plugins installieren.
|
||||
</li>
|
||||
<li style="margin-bottom: 12px;">
|
||||
<strong>Das integrierte Terminal:</strong>
|
||||
<br>Drücke <kbd>Strg</kbd> + <kbd>`</kbd> (Taste links neben der Backspace-Taste / bzw. <kbd>Strg</kbd> + <kbd>J</kbd>).
|
||||
<br>Hier kannst du direkt wie gewohnt deine Befehle tippen:
|
||||
<div class="code-container" style="margin: 8px 0;">
|
||||
<pre><code>python3 test_all.py</code></pre>
|
||||
</div>
|
||||
</li>
|
||||
<li style="margin-bottom: 12px;">
|
||||
<strong>Python-Interpreter auswählen:</strong>
|
||||
<br>Unten rechts in der Statusleiste steht deine Python-Version (z.B. <code>3.11.x</code>). Falls dort <em>"Select Interpreter"</em> steht, klicke darauf und wähle den empfohlenen Python-Pfad aus.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 5. Die wichtigsten Shortcuts -->
|
||||
<section class="card">
|
||||
<h2>5. ⌨️ Die wichtigsten Tastenkombinationen (Shortcuts)</h2>
|
||||
|
||||
<p>Mit diesen Shortcuts codest du wie ein echter Profi:</p>
|
||||
|
||||
<table style="width: 100%; border-collapse: collapse; margin: 15px 0;">
|
||||
<thead>
|
||||
<tr style="background: var(--primary-light); text-align: left;">
|
||||
<th style="padding: 10px; border: 1px solid var(--border-color);">Aktion</th>
|
||||
<th style="padding: 10px; border: 1px solid var(--border-color);">Windows / Linux</th>
|
||||
<th style="padding: 10px; border: 1px solid var(--border-color);">macOS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);">💾 Datei speichern</td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Strg</kbd> + <kbd>S</kbd></td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Cmd</kbd> + <kbd>S</kbd></td>
|
||||
</tr>
|
||||
<tr style="background: #fafafa;">
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);">💻 Terminal öffnen / schließen</td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Strg</kbd> + <kbd>`</kbd> (oder <kbd>Strg</kbd> + <kbd>J</kbd>)</td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Cmd</kbd> + <kbd>`</kbd> (oder <kbd>Cmd</kbd> + <kbd>J</kbd>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);">⚡ Command Palette (Alles suchen)</td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Strg</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></td>
|
||||
</tr>
|
||||
<tr style="background: #fafafa;">
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);">🪄 Code automatisch formatieren</td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd></td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Option</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);">✨ Nächstes gleiches Wort markieren</td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Strg</kbd> + <kbd>D</kbd></td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Cmd</kbd> + <kbd>D</kbd></td>
|
||||
</tr>
|
||||
<tr style="background: #fafafa;">
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);">🚀 Skript direkt ausführen</td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Strg</kbd> + <kbd>F5</kbd> (oder Play-Button oben rechts)</td>
|
||||
<td style="padding: 10px; border: 1px solid var(--border-color);"><kbd>Cmd</kbd> + <kbd>F5</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- 6. Mitmach-Experiment -->
|
||||
<section class="card">
|
||||
<h2>6. 🧪 Dein Mitmach-Check in <code>vscode_test.py</code></h2>
|
||||
|
||||
<p>Öffne die Datei <code>04b_umstieg_vscode/vscode_test.py</code> in VS Code und probiere die neuen Features aus:</p>
|
||||
|
||||
<ul class="task-list">
|
||||
<li class="task-item">
|
||||
<input type="checkbox" class="task-checkbox" id="c1">
|
||||
<label for="c1" class="task-label">
|
||||
<strong>Schritt 1:</strong> Öffne das Projekt <code>Aufgaben-Python</code> als Ordner in VS Code.
|
||||
</label>
|
||||
</li>
|
||||
<li class="task-item">
|
||||
<input type="checkbox" class="task-checkbox" id="c2">
|
||||
<label for="c2" class="task-label">
|
||||
<strong>Schritt 2:</strong> Installiere die Erweiterungen <strong>Python</strong> und <strong>Error Lens</strong>.
|
||||
</label>
|
||||
</li>
|
||||
<li class="task-item">
|
||||
<input type="checkbox" class="task-checkbox" id="c3">
|
||||
<label for="c3" class="task-label">
|
||||
<strong>Schritt 3:</strong> Öffne <code>vscode_test.py</code> und beobachte, wie Error Lens sofort Fehler hervorhebt.
|
||||
</label>
|
||||
</li>
|
||||
<li class="task-item">
|
||||
<input type="checkbox" class="task-checkbox" id="c4">
|
||||
<label for="c4" class="task-label">
|
||||
<strong>Schritt 4:</strong> Tippe <code>auto.</code> und sieh dir die Autovervollständigung (IntelliSense) an.
|
||||
</label>
|
||||
</li>
|
||||
<li class="task-item">
|
||||
<input type="checkbox" class="task-checkbox" id="c5">
|
||||
<label for="c5" class="task-label">
|
||||
<strong>Schritt 5:</strong> Öffne das Terminal mit <kbd>Strg</kbd> + <kbd>`</kbd> und führe <code>python3 vscode_test.py</code> aus.
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="box box-success">
|
||||
<div class="box-title">🎉 Perfekt vorbereitet!</div>
|
||||
Du beherrschst nun die Grundlagen von VS Code. Jetzt bist du bereit für Kapitel 05 (Objekte kombinieren)!
|
||||
</div>
|
||||
|
||||
<div class="footer-nav">
|
||||
<a href="../04_str_und_darstellung/index.html" class="btn btn-secondary">← Zurück zu Kapitel 04</a>
|
||||
<a href="../05_objekte_kombinieren/index.html" class="btn">Weiter zu Kapitel 05: Komposition →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
73
04b_umstieg_vscode/vscode_test.py
Normal file
73
04b_umstieg_vscode/vscode_test.py
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
"""
|
||||
🚀 VS CODE AUSPROBIER-PLAYGROUND 🚀
|
||||
===================================
|
||||
Willkommen in VS Code! Diese Datei ist zum Experimentieren da.
|
||||
Folge den 4 Mini-Experimenten unten:
|
||||
"""
|
||||
|
||||
# ==============================================================================
|
||||
# EXPERIMENT 1: Better Comments (Farbige Kommentare)
|
||||
# Wenn du die Erweiterung 'Better Comments' installiert hast, siehst du hier
|
||||
# verschiedene Farben für verschiedene Kommentar-Typen:
|
||||
# ==============================================================================
|
||||
|
||||
# TODO: Das ist ein normaler orangefarbener Aufgaben-Kommentar
|
||||
# ! ACHTUNG: Das ist ein wichtiger roter Warn-Kommentar
|
||||
# ? FRAGE: Das ist ein blauer Frage-Kommentar
|
||||
# * INFO: Das ist ein hervorgehobener grüner Info-Kommentar
|
||||
|
||||
|
||||
# ==============================================================================
|
||||
# EXPERIMENT 2: IntelliSense (Automatische Code-Vervollständigung)
|
||||
# Schau dir diese Klasse an:
|
||||
# ==============================================================================
|
||||
class ElektroAuto:
|
||||
def __init__(self, modell, batterie_kwh=60):
|
||||
self.modell = modell
|
||||
self.batterie_kwh = batterie_kwh
|
||||
self.ladestand_prozent = 100
|
||||
|
||||
def fahren(self, kilometer):
|
||||
verbrauch = kilometer * 0.2
|
||||
self.ladestand_prozent -= verbrauch
|
||||
return f"{self.modell} ist {kilometer} km gefahren! (Akku: {self.ladestand_prozent:.0f}%)"
|
||||
|
||||
def batterie_aufladen(self):
|
||||
self.ladestand_prozent = 100
|
||||
return f"{self.modell} ist wieder voll aufgeladen!"
|
||||
|
||||
|
||||
# 👇 PROBIERE ES HIER AUS:
|
||||
# 1. Entferne das '#' in der nächsten Zeile.
|
||||
# 2. Tippe 'tesla.' und warte eine Millisekunde:
|
||||
# VS Code schlägt dir automatisch '.fahren', '.batterie_aufladen', '.modell' usw. vor!
|
||||
# Wähle mit den Pfeiltasten und drücke Tab oder Enter.
|
||||
|
||||
tesla = ElektroAuto("Tesla Model 3")
|
||||
# print(tesla.fahren(50))
|
||||
|
||||
|
||||
# ==============================================================================
|
||||
# EXPERIMENT 3: Automatisches Formatieren (Format Document)
|
||||
# Diese Zeilen hier unten sind absichtlich etwas unordentlich eingerückt / mit
|
||||
# unschönen Abständen:
|
||||
# Drücke: Alt + Shift + F (Mac: Option + Shift + F) oder speichere mit Strg + S.
|
||||
# Siehst du, wie VS Code die Abstände automatisch perfekt aufräumt?
|
||||
# ==============================================================================
|
||||
liste_der_autos = [ "Tesla" , "BMW" , "Porsche" , "Audi" ]
|
||||
|
||||
|
||||
# ==============================================================================
|
||||
# EXPERIMENT 4: Ausführen im integrierten Terminal
|
||||
# 1. Drücke Strg + ` (oder Cmd + ` auf Mac), um das Terminal unten zu öffnen.
|
||||
# 2. Tippe: python3 04b_umstieg_vscode/vscode_test.py (oder klicke auf das Play-Symbol ▶️ oben rechts).
|
||||
# ==============================================================================
|
||||
if __name__ == "__main__":
|
||||
print("=" * 55)
|
||||
print("🎉 HERZLICHEN GLÜCKWUNSCH! VS CODE FUNKTIONIERT PERFEKT!")
|
||||
print("=" * 55)
|
||||
print(f"Auto erstellt: {tesla.modell}")
|
||||
print(tesla.fahren(80))
|
||||
print(f"Bereinigte Liste: {liste_der_autos}")
|
||||
print("\n👉 Du bist jetzt bereit für Kapitel 05 (Objekte kombinieren)!")
|
||||
print("=" * 55)
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<nav class="nav-links">
|
||||
<a href="../index.html">🏠 Zur Kursübersicht</a>
|
||||
<span>›</span>
|
||||
<a href="../04_str_und_darstellung/index.html">Kapitel 04</a>
|
||||
<a href="../04b_umstieg_vscode/index.html">Kapitel 04b (VS Code)</a>
|
||||
<span>›</span>
|
||||
<span style="color: white; font-weight: 600;">Kapitel 05</span>
|
||||
</nav>
|
||||
|
|
@ -190,7 +190,7 @@
|
|||
</div>
|
||||
|
||||
<div class="footer-nav">
|
||||
<a href="../04_str_und_darstellung/index.html" class="btn btn-secondary">← Zurück zu Kapitel 04</a>
|
||||
<a href="../04b_umstieg_vscode/index.html" class="btn btn-secondary">← Zurück zu Kapitel 04b: VS Code</a>
|
||||
<a href="../06_abschlussprojekt_tamagotchi/index.html" class="btn">Weiter zum Abschlussprojekt →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ Die Übungen sind so aufgebaut, dass jedes Kapitel auf dem vorherigen aufbaut:
|
|||
| **[02. Konstruktor & self](./02_init_und_self/)** | `__init__` & `self` | Objekte sauber mit Startwerten initialisieren |
|
||||
| **[03. Methoden & Verhalten](./03_methoden_und_verhalten/)** | Methoden & Interaktion | Objekte können handeln & miteinander interagieren |
|
||||
| **[04. Schöne Textausgabe](./04_str_und_darstellung/)** | `__str__` Dunder-Methode | Wie Objekte lesbar mit `print()` ausgegeben werden |
|
||||
| **[04b. Umstieg auf VS Code](./04b_umstieg_vscode/)** | **Exkurs: IDE-Wechsel** | **Von Thonny zu VS Code: Plugins (Error Lens, Python), Shortcuts & Terminal** |
|
||||
| **[05. Objekte kombinieren](./05_objekte_kombinieren/)** | Komposition | Listen von Objekten & komplexe Datenstrukturen |
|
||||
| **[06. Abschlussprojekt](./06_abschlussprojekt_tamagotchi/)** | Mini-Projekt: Tamagotchi | Ein interaktives Konsolenspiel mit allem Gelernten |
|
||||
|
||||
|
|
@ -37,7 +38,7 @@ In jedem Kapitelordner findest du:
|
|||
|
||||
1. Öffne den Ordner des aktuellen Kapitels (z.B. `00_fehlersuche_und_grundlagen`).
|
||||
2. Öffne die `index.html` im Browser oder lies die `README.md`.
|
||||
3. Öffne `aufgabe.py` und bearbeite die nummerierten `TODO`s / Bugs.
|
||||
3. Öffne `aufgabe.py` und bearbeite die Aufgaben.
|
||||
4. Führe die Tests aus, um deine Lösung zu prüfen:
|
||||
```bash
|
||||
python3 test_aufgabe.py
|
||||
|
|
|
|||
|
|
@ -258,14 +258,80 @@ pre code {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
/* Code Syntax Highlights (CSS simulated) */
|
||||
.kw { color: #f472b6; font-weight: bold; } /* def, class, return, if */
|
||||
.fn { color: #60a5fa; } /* function name */
|
||||
.str { color: #a7f3d0; } /* strings */
|
||||
.num { color: #fbbf24; } /* numbers */
|
||||
.cm { color: #64748b; font-style: italic; } /* comments */
|
||||
.var { color: #cbd5e1; } /* self, variables */
|
||||
.attr { color: #38bdf8; } /* self.attributes */
|
||||
/* Code Syntax Highlights */
|
||||
.kw { color: #f472b6; font-weight: bold; }
|
||||
.fn { color: #60a5fa; }
|
||||
.str { color: #a7f3d0; }
|
||||
.num { color: #fbbf24; }
|
||||
.cm { color: #64748b; font-style: italic; }
|
||||
.var { color: #cbd5e1; }
|
||||
.attr { color: #38bdf8; }
|
||||
|
||||
/* Keyboard Shortcut Badges */
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 7px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
font-weight: 700;
|
||||
color: #334155;
|
||||
background-color: #f1f5f9;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-bottom: 2px solid #94a3b8;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
/* Extension Cards (for VS Code Guide) */
|
||||
.extension-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.extension-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.extension-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.extension-icon {
|
||||
font-size: 1.8rem;
|
||||
background: var(--primary-light);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.extension-info h4 {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.extension-info p {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Accordion / Details */
|
||||
details {
|
||||
|
|
@ -446,4 +512,5 @@ summary:hover {
|
|||
.card { padding: 18px; }
|
||||
.footer-nav { flex-direction: column; }
|
||||
.footer-nav .btn { width: 100%; justify-content: center; }
|
||||
.extension-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
|
|
|||
14
index.html
14
index.html
|
|
@ -26,7 +26,7 @@
|
|||
Jetzt machen wir den nächsten großen Schritt in der Softwareentwicklung: <strong>Klassen & Objekte</strong>!
|
||||
</p>
|
||||
<p>
|
||||
Damit du beim Programmieren nie an kleinen Syntaxfehlern verzweifelst, starten wir mit einem kurzen <strong>Warm-up zur Fehlersuche (Kapitel 00)</strong>, bevor es mit den Klassen losgeht.
|
||||
Damit du beim Programmieren nie an kleinen Syntaxfehlern verzweifelst, starten wir mit einem kurzen <strong>Warm-up zur Fehlersuche (Kapitel 00)</strong>, und steigen nach Kapitel 04 auf die Profi-Entwicklungsumgebung <strong>VS Code (Kapitel 04b)</strong> um.
|
||||
</p>
|
||||
|
||||
<div class="box box-analogie">
|
||||
|
|
@ -90,6 +90,16 @@
|
|||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||||
</a>
|
||||
|
||||
<!-- Kapitel 4b (VS Code Exkurs) -->
|
||||
<a href="04b_umstieg_vscode/index.html" class="roadmap-card" style="border-left: 4px solid var(--secondary);">
|
||||
<div>
|
||||
<span class="roadmap-number" style="background: #e0f2fe; color: #0284c7;">Exkurs 04b</span>
|
||||
<div class="roadmap-title">🚀 Umstieg auf VS Code</div>
|
||||
<div class="roadmap-desc">Von Thonny zu VS Code: Die besten Plugins (Error Lens, Python), Shortcuts, Projektordner & integriertes Terminal.</div>
|
||||
</div>
|
||||
<div class="roadmap-footer">VS Code Tutorial öffnen →</div>
|
||||
</a>
|
||||
|
||||
<!-- Kapitel 5 -->
|
||||
<a href="05_objekte_kombinieren/index.html" class="roadmap-card">
|
||||
<div>
|
||||
|
|
@ -117,7 +127,7 @@
|
|||
<section class="card">
|
||||
<h2>🚀 Wie du vorgehst (Schritt-für-Schritt)</h2>
|
||||
<ol style="margin-left: 20px; margin-bottom: 15px;">
|
||||
<li style="margin-bottom: 8px;">Wähle das nächste offene Kapitel aus der Liste oben (am besten startest du mit Kapitel 00).</li>
|
||||
<li style="margin-bottom: 8px;">Wähle das nächste offene Kapitel aus der Liste oben (starte mit Kapitel 00 zum Warm-up).</li>
|
||||
<li style="margin-bottom: 8px;">Lies die Erklärungen und schau dir die vollständigen Codebeispiele an.</li>
|
||||
<li style="margin-bottom: 8px;">Öffne die <code>aufgabe.py</code> im entsprechenden Kapitelordner und löse die Aufgaben.</li>
|
||||
<li style="margin-bottom: 8px;">
|
||||
|
|
|
|||
Loading…
Reference in a new issue