Die Datei- und Ordnerstruktur
Ein Programmierprojekt besteht aus einer Sammlung von Dateien, die einem sinnvollen Schema folgend in Verzeichnissen abgelegt werden. Wir lernen unsere Projektstruktur kennen.
Last updated
Was this helpful?
Ein Programmierprojekt besteht aus einer Sammlung von Dateien, die einem sinnvollen Schema folgend in Verzeichnissen abgelegt werden. Wir lernen unsere Projektstruktur kennen.
Last updated
Was this helpful?
In jeder Lektion dieses Kurses findet ihr einen bestimmten Stand des Spiels. Dabei ist die Datei- und Ordnerstruktur immer gleich. Folgende Dateien und Ordner findet ihr in jeder Lektion, später kommen noch neue Dateien hinzu. Wir betrachten am Beispiel der ersten Lektion die Struktur etwas genauer:
Im Order css/ legen wir alle Dateien ab, in denen wir mit der Sprache CSS (Cascading Stylesheets) das Aussehen unserer Webseite beschreiben. Diese Datei wird in diesem Kurs eine untergeordnete Rolle spielen, wir legen sie aber von Beginn an in unserem Projekt an.
Im Order js/ legen wir alle Dateien ab, in denen wir mit Javascript die Programmlogik unseres Spiels definieren. In der ersten Lektion ist dort nur eine Datei game.js. In späteren Lektionen werden hier weitere Dateien mit der Endung .js hinzukommen, weil wir ein komplexes Programm sinnvoll in kleine Module unterteilen. Das machen wir, um die Übersichtlichkeit und die Wartbarkeit unseres Codes besser zu erhöhen.
Im Root-Ordner jeder Lektion liegt die index.html. Das ist der Einstieg in unser Spiel, das der Benutzer später im Browser öffnet. In dieser Datei ist mittels HTML beschrieben, welche Elemente wir auf unserer Startseite des Spiels anzeigen wollen. Darunter fallen zum Beispiel die Spielfläche selbst, aber auch informative Texte zum Spiel oder die Anzeige der aktuellen Punktzahl und Leben des Spielers während des Spiels.
In diesem Abschnitt geht es vornehmlich um das Kennenlernen der Projektstruktur. Wir wollen dennoch hier bereits unsere erste Zeile JavaScript-Code kennenlernen:
Die Entwickler-Konsole nimmt eine wichtige Rolle beim Programmieren von Webseiten und damit auch dieses Spiels ein. Dort können wir nicht nur Ausgaben aus unserem Programm heraus mit console.log() erzeugen. Wir bekommen dort auch sämtliche Fehler angezeigt, die ganz sicher irgendwann auftreten werden. Sollte also einmal etwas nicht funktionieren, ist die Entwickler-Konsole immer der erste Ort nachzuschauen, ob Fehlermeldungen vorliegen.
Diese Zeile findet ihr, wenn du die JavaScript-Datei game.js in der öffnest. Der Befehl sorgt dafür, dass ihr auf der Entwickler-Konsole eine Ausgabe mit dem entsprechenden Text seht. Die Entwickler-Konsole öffnet ihr in Chrome (und den meisten anderen Browsern) mit der Tastenkombination Strg + Shift + i. Es öffnet sich ein neues Fenster in eurem Browser, das wie unten im Bild aussieht. Klickt dort auf Console und ihr solltet die Ausgabe sehen.
