Die Entwicklungsumgebung
Zum Programmieren benötigen wir einen Editor, um unseren Code zu schreiben. Optimalerweise bringt der Editor noch weitere nützliche Funktionen mit. Dann nennen wir es eine Entwicklungsumgebung.
Last updated
Was this helpful?
Zum Programmieren benötigen wir einen Editor, um unseren Code zu schreiben. Optimalerweise bringt der Editor noch weitere nützliche Funktionen mit. Dann nennen wir es eine Entwicklungsumgebung.
Last updated
Was this helpful?
Wir erstellen in diesem Kurs ein Pacman-Spiel als Online-Variante, die vollständig im Browser läuft. Damit sind für uns die verwendeten Sprachen durch den Browser vorgegeben:
HTML, um sichtbare Elemente auf einer Webseite anzuzeigen
CSS, um die sichtbaren Elemente zu gestalten (Farbe, Schriftart, Abstände u.v.m).
JavaScript, für die Programmierlogik.
Von diesen 3 Sprachen steht in diesem Kurs Javascript im Vordergrund. Javascript ist von den drei genannten Sprachen die einzige Programmiersprache. Die anderen beiden Sprachen sind sogenannte Auszeichnungssprachen. Das bedeutet, wir beschreiben mit HTML die Struktur (Bereiche, Überschriften, Absätze), die Inhalte (Textabschnitte, Bilder, Links, Listen) und mit CSS das Aussehen (Farben, Schriftarten) von Dokumenten (hier: Webseiten). Mit diesen beiden Sprachen können wir keine Programme schreiben, die nach einer bestimmten Logik eine Reihe von Befehlen ausführen. Das können wir im Browser nur mit JavaScript erreichen.
Um eine Webseite im Browser anzuzeigen, benötigen wir einen sogenannten Webserver. Ich empfehle euch für diesen Kurs die Verwendung der Online-Plattform . Glitch läuft vollständig in der Cloud, was bedeutet, dass ihr keine Software auf eurem Rechner installieren müsst. Ihr könnt euch einen kostenlosen Account anlegen und direkt loslegen.
Wenn ihr eine lokale Entwicklung bevorzugt, empfehle ich euch die Installation von und die Verwendung der . Wie man diese installiert und konfiguriert beschreibe ich in diesem Kurs nicht.
Ihr könnt euch einen kostenlosen Glitch-Account erstellen und gleich loslegen. Sobald ihr bei Glitch angemeldet seid, erzeugt ihr ein neues Projekt über den "New Project" Button in der oberen rechten Ecke. Dort wählt ihr ganz unten "Import from Github" aus. Es öffnet sich ein Fenster, in dem nach der URL eures Git-Repository gefragt wird. Diese bekommt ihr direkt von der GitHub-Webseite dieses Kurses. Um es einfach zu machen, habe ich die URL für euch kopiert. Fügt den folgenden Wert in das Eingabefeld ein:
Klickt anschließend auf "OK" und die Dateien für diesen Kurs werden mit allen Lektionen in euer neues Glitch-Projekt importiert.
Nach dem Importieren befindet ihr euch in der Projektansicht. Auf der linken Seite seht ihr die Verzeichnisse und Dateien eures Projekts. In der Mitte befindet sich der Code-Editor, in dem ihr Dateien öffnen und bearbeiten könnt. Um das Ergebnis einer bestimmten Lektion zu sehen, klickt ihr auf den "Show"-Button und wählt "Next to The Code" aus. Es öffnet sich ein weiterer Bereich am rechten Rand des Bildschirms, in dem eine Vorschau einer HTML-Datei angezeigt werden kann. Um die Vorschau für Lektion 1 zu sehen, müsst ihr euch zunächst durch die Ordnerstruktur klicken. Sobald ihr im Ordner tutorials/lektion_01 seid, sollte eine Vorschau der index.html, die sich in diesem Ordner befindet, angezeigt werden. Alternativ könnt ihr auch auf der Startseite im Root-Verzeichnis auf die jeweilige Lektion klicken.
