Programmierer werden - wie denn richtig?-Teil 1

Da bleib ich lieber bei Qbasic und Win3.11.

Ich finde es toll das ihr anderen solche sachen nahe bringen wollt.

Viel Spaß dabei.

Allerallererster Schritt in die Programmierung

Schön, du hast dich entschieden vielleicht etwas programmieren zu lernen. Das ist super, egal für welchen Bereich oder welche Sprache du dich später entscheidest, Entwickler zu sein, ist immer gut und sie werden auch immer und überall gesucht.

Vorab aber einiges gesagt, dieser Beitrag soll eigentlich nur als Beispiel gesehen werden. Was hier jedoch gezeigt wird, funktioniert wirklich und zielt auf die wirklich absoluten Anfänger ab - also wenn du noch gar keine Erfahrung mit der Programmierung oder dem "Computer erzählen, was er tun soll" hast, kann du das gerne einmal ausprobieren.

Womit wir uns hier beschäftigen werden ist Javascript. Eine Scriptsprache, die in letzter Zeit einen richtigen Hype durchlebt hat und in sämtlichen Bereichen auch Einsatz finden kann.

Voraussetzungen

Einen Browser (das Dingen, womit du dir gerade das Forum anschaust) und eine Tastatur (evtl. Maus für spätere Kapitel). Bei mobilen Geräten, wie Smartphones oder Tablets funktioniert dies allerdings nicht, du benötigst schon einen Desktop-Computer (Mac, Windows-PC, Linux (mit grafischer Oberfläche)).

* Der Safari bildet eine Ausnahme, hier muss man die Developer Tools erst einschalten.

Vorbereitung

Bei allen Browsern - sei es Chrome, Firefox, Internet Explorer (nicht die Uralt-Versionen, nach Möglichkeit dann bitte Version 9 oder höher), Edge, Safari*, Vivaldi, Opera, etc. gibt es die sogenannten Developer Tools, also Entwicklerwerkzeuge. Diese Tools öffnet ihr im Allgemeinen mit F12.

Und wenn ihr jetzt ESC drückt, öffnet sich die sogenannte Konsole. Hier drinnen werden wir alles machen und lernen.

In der Konsole können wir direkt Javascript-Befehle eingeben und ausführen lassen. So können wir hier einfache Rechenaufgaben direkt lösen. Zum Beispiel können wir uns ausrechnen lassen, wie viele Gegenstände in einer Doppelkiste (6 Reihen mit 9 Plätzen) sind, wenn sie komplett mit Stacks befüllt ist (64).

Oder wir können auch ausrechnen wieviel ein Stack kostet, wenn wir von Grieferwert nur den DK-Preis wissen:

Nur einmal so kurz am Rande erwähnt. In der Konsole könnt man auch mehrzeilige Befehle schreiben, allerdings muss man hierfür entweder den Mehrzeilen-Editor starten (Internet Explorer, Edge) oder am Ende jeder Zeile mit Shift-Return arbeiten. Bei Chrome gibt es mittlerweile auch ein intelligentes System, was automatisch einige Befehle erkennt und Umbrüche mit normalen Return zu lässt, bis der Befehl beendet wurde.

Richtiges Programmieren, läuft aber wie bei Mathe mit Variablen ab. Ganz einfach ausgedrückt, sind das Sachen, wo ihr einen bestimmten Wert einen Namen gebt.

In Javascript gibt es hierfür eine Anweisung Namens var. Genutzt wird sie folgend:

var name = wert;

Wir wollen mehr mit Doppelkisten (DK) rechnen, deswegen legen wir uns Variable mit der Anzahl der Felder an, da wir dumm sind, sagen wir auch nicht direkt 54, sondern rechnen die 9 * 6 Felder:

var dk = 9 * 6;

[das Semikolon ";" am Ende sagt dem Computer, dass dieser eine Befehl hier endet]
Damit können wir jetzt genauso rechnen wir zuvor:

So können wir auch noch eine zweite Variable für eine einfache Kiste anlegen. Da die einfache Kiste genau halb so groß ist, wie eine Doppelkiste, können wir einfach nur unsere vorherige Variable durch 2 Teilen:

var kiste = dk / 2;

Und dann den Preis von einer Doppelkiste in eine einfache Kiste umrechnen (ich weiß, das geht auch deutlich schneller und einfacher, aber es soll nur die Variablennutzung verdeutlichen):

Es geht weiter...

Programmierer sind fleißige, aber auch sehr Tippfaule Menschen. Wenn sie eine Berechnung immer und immer wieder ausführen müssen, schreiben sie sich eine sogenannte Funktion. In dieser Funktion kann man eine Formel speichern und diese mit den Aufrufen der Funktion immer wieder neu berechnen lassen. Hierfür lernen wir noch zwei weitere Ausdrücke kennen function und return.

Die Schreibweise eine Funktion ist folgende:

function nameDerFunktion()
{
    // Inhalt der Funktion

    // Rückgabe der Funktion
    return 1;
}

Hier sind zwar einige Klammern (runde und geschweifte) und es gibt auch eingerückten Text und komische Zeilen mit 2 Schrägstrichen am Anfang, aber das ist nur halb so wild, man gewöhnt sich schnell daran.

• // doppelte Schrägstriche sagen dem Computer in Javascript, dass jetzt ein Kommentar folgt, wird beim ausführen des Codes komplett ignoriert. Die Programmierer erklären mit den Kommentaren, was sie tun möchten oder was hier passiert.
• alles was in den geschweiften Klammern steht {}, ist der Inhalt der Funktion.
• zu den runden Klammern, kommen wir später..
• und mit return geben wir an, was die Funktion zurückgeben soll. In diesem Fall 1.

Aber weiter im Programm...

Die Funktion von oben können wir auch so ausführen lassen:

nameDerFunktion();

Als Ergebnis würden wir aber immer 1 erhalten, da wir in der Funktion gesagt haben return 1;. Damit eine Funktion etwas verarbeiten kann, gibt es sogenannte Parameter. Diese werden zwischen den runden Klammern beim Schreiben der Funktion angegeben und verhalten sich dann so wie die oben genannten Variablen, aber nur innerhalb der Funktion.

function verdoppeln(zahl)
{
    return zahl * 2;
}

Hiermit haben wir jetzt eine Funktion erstellt, der man eine Zahl übergeben kann und die Funktion verdoppelt den Wert der Zahl für uns zahl * 2 und gibt das Ergebnis zurück.

verdoppeln(5); // -> 10
verdoppeln(34); // -> 68

So können wir uns eine Funktion zum Berechnen eines Stack-Preises vom dem Grieferwert Preis eine Doppelkiste:

function dkPreisZuStackPreis(dk_preis)
{
    return dk_preis / 54;
}

Der Einfachheit halber für alle, schreiben die komplette Funktion in der Konsole in einer Zeile:

function dkPreisZuStackPreis(dk_preis) { return dk_preis / 54; }

Diese können wir jetzt mit den DK-Preisen von Grieferwert befüllen und uns den Stack-Preis zurückgeben lassen:

dkPreisZuStackPreis(5000); // -> 92.5925925925926
dkPreisZuStackPreis(10800); // -> 200

Jetzt haben wir unsere erste Funktion geschrieben und schon ein wenig programmiert!


Zu erwähnen bleibt allerdings noch eine Sache:

Alles was ihr in der Konsole schreibt ist nur für die Dauer des derzeitigen Internet-Seitenbesuchs gültig. Wenn ihr z.B. die Seite neu ladet (F5) oder zu einer anderen Seite (sei es auch nur eine Unterseite, z.B. die nächste Seite des Themas) ist alles wieder weg und muss von vorne geschrieben werden. So können wir nach einem Neu laden nicht mehr unsere Funktion ausführen lassen und erhalten einen Fehler:

Erst wenn wir die Funktion wieder deklarieren funktioniert es:

Das war's fürs erste mit der Beispiel-Einführung.

Zitat von monsimann

Da bleib ich lieber bei Qbasic und Win3.11.

Dass es hier Leute gibt, die diese beiden Dinge noch kennen.

Ich habe selber genau in dieser Umgebung meine ersten Programme gebastelt.

Zum Programmieren-Lernen war dieses Basic damals nämlich super geeignet, da es bei MS-DOS 6.22 standardmäßig dabei war. wobei ich heute eher die etwas modernere Weiterentwicklung FreeBasic empfehlen würde, weil QB eben noch ein MS-DOS-Programm ist und dieser nur mit Fummeleien auf modernen Betriebssystemen funktioniert und der Editor im Vergleich zu damals nicht sehr komfortabel war.

Ich nutze immer noch die alten Tastenkombinationen für Cut/Copy/Paste.

@jikan-nai:

Anstatt die Debug-Konsole des Browsers zweckzuentfremden, würde ich lieber auf was webbasiertes zurückgreifen (z.B. CodePen).

Die Erklärungen sind für Anfänger zudem schlecht bis sehr schlecht.

Die Variablen fand ich z.B. viel zu kurz angerissen.

Du solltest wenigstens erklären...

...dass ein "mehrzeiliger Befehl" (=Programm) von oben nach unten ausgeführt wird.

...was var genau macht und wann genau es wo im Programm anzugeben ist.

...wo überall die deklarierte Variable gültig ist.

...JavaScript-typische Fehlerquelle, wenn use strict nicht genutzt wird: Was für negative Konsequenzen es haben kann, wenn var falsch angewendet oder vergessen wird, wodurch das Programm trotzdem zunächst funktioniert.

...dass die Groß-/Kleinschreibung bei allem relevant ist.

...welche Namen/Zeichen für Variablennamen erlaubt sind.

...dass Funktionsparameter mit Komma getrennt werden.

Zitat von Diranus

@jikan-nai:

Du solltest wenigstens erklären...

...dass ein "mehrzeiliger Befehl" (=Programm) von oben nach unten ausgeführt wird.

...was var genau macht und wann genau es wo im Programm anzugeben ist.

...wo überall die deklarierte Variable gültig ist.

...JavaScript-typische Fehlerquelle, wenn use strict nicht genutzt wird: Was für negative Konsequenzen es haben kann, wenn var falsch angewendet oder vergessen wird, wodurch das Programm trotzdem zunächst funktioniert.

...dass die Groß-/Kleinschreibung bei allem relevant ist.

...welche Namen/Zeichen für Variablennamen erlaubt sind.

...dass Funktionsparameter mit Komma getrennt werden.

Alles anzeigen

Zu dem ersten Punkt hatte ich mir auch kurz Gedanken gemacht, aber schnell wieder verworfen. Wenn man ja einen Text liest, liest man ja auch nicht die 6. Zeile und springt dann zur 3., sondern geht den Absatz Zeile für Zeile von oben nach unten durch. Bei Sprachen, wo dies nicht der Fall ist, sollte man dies aber wirklich ansprechen - könnte ja z.B. bei Javascript sein, Thema Asynchron.

Dein Punkt mit der Groß- und Kleinschreibung hätte wirklich noch mit rein gesollt. Das ist ein wichtiger Aspekt, der zu beachten ist. Eventuell auch noch etwas die Zeichen anreißen, in Javascript werden viel mehr Zeichen zugelassen (Großteil UTF-8, das allseits bekannte "$" aber auch z.B. "ö", "µ" oder "議") als in anderen Sprachen, deswegen lieber nur auf allgemein gültige Zeichen hinweisen.

Mit dem Rest könnte man Bücher füllen.

Ich habe aber auch absichtlich vieles Weggelassen oder versucht es relativ einfach zu halten. Die Hauptabsicht ist, erst einmal schnell einen kurzen Einstieg in die allgemeine Programmierung zu geben und schnell zu Erfolgen zu kommen. Du kennst sicherlich auch viele Bücher und Artikel, welche auf solche Aspekte mit eingehen und erst nach der Hälfte zum eigentlichen Thema kommen. Hier geht es um einen absoluten Anfänger, der vielleicht bloß einmal die Idee hatte zu Programmieren, aber noch gar nicht richtig weiß, ob es "ihm liegt". Wenn danach noch Interesse besteht, kann, sollte und muss auch darauf eingegangen werden.

Außerdem wollte ich versuchen so "sprach-übergreifend" wie nur möglich zu sein, also nicht auf reine Javascript-Eigenheiten einzugehen ("strict", Scopes). Ich weiß z.B., dass die Variablen in JS loose type sind und vielen anderen Sprachen der Typ noch mit angegeben werden muss. Das kann ein Vorteil sein (leichter zu lernen, es muss nicht noch diverse unterschiedliche Nummerntypen eingegangen werden), aber hat auch den sehr großen Nachteil, dass der Typ einer Variablen sich schnell ändern kann und so eine riesige Fehlerquelle darstellt. Grundsätzlich finde ich es jedoch für den Anfang wichtiger auf das Prinzip der Variablen einzugehen.

Zitat

Bei Sprachen, wo dies nicht der Fall ist, sollte man dies aber wirklich ansprechen - könnte ja z.B. bei Javascript sein, Thema Asynchron.

Ganz genau das habe ich damit gemeint. Und sobald die Funktion aufgerufen wird, ist das nicht mehr wirklich der Fall (die Programmausführung springt dann ja von irgendwo auf den Anfang der Funktion, und bei Return wieder zurück)., wobei die Funktion nicht automatisch ausgeführt wird, wenn die Programmausführung von oben kommend den Anfang "function" erreicht, sondern darüber hinweg springt.

Zitat

deswegen lieber nur auf allgemein gültige Zeichen hinweisen.

Genauer: Auf den ASCII-Zeichensatz beschränken, der immum gegen Kodierungsfehler ist, da er die gemeinsame Komponente ist, auf den alle anderen gängigen Kodierungen aufbauen.

Zeichen aus dem UTF-8 (oder andere Kodierung) im Source sind böse. Verwendet man Umlaute o.ä., kann das zur Fehlfunktion führen, wenn vom Compiler/Interpreter die falsche Zeichenkodierung "erraten" wird, da Source-Dateien idr. keinen Meta-Tag dafür besitzen.

Besonders bei Webtechnologien ist das sehr wichtig, da hier unterschiedlichste Computersysteme aufeinandertreffen. Man sieht ja so Escapezeichen- und Buchstabenruinen, wie "Dümitri Köäze" häufiger im Internet.

Dieses Beispiel, das ich mir per Copy and Paste geholt habe, hat übrigens gerade diesen Editor aus dem Tritt gebracht, so da er irgendwie versucht hat, es zu korrigieren, wobei Unsinn rauskam. Ich musste auf die HTML-Ansicht umschalten und nachbessern, da es ja bewusst falsch dargestellt werden soll.

In JS-Strings kann man übrigens auch HTML-Escape in den Strings verwenden, falls Sonderzeichen benötigt werden.

Zitat

Variablen in JS loose type sind und vielen anderen Sprachen der Typ noch mit angegeben werden muss.

Was genau eine Variable ist, halte ich für superwichtig.

Dein Tutorial habe ich als eine hastige Einführung empfunden, wie: "Wenn wir das und das eingeben, passiert das und das. Wenn noch dieses und jenes dazu, ändert sich folgendes". Aber was genau die einzelnen Teile sind, halte ich besonders am Anfang wichtig.

Zitat von Diranus

Wenn C mit seinen Eigenarten dafür anfangs noch zu schwer ist, würde ich das gute alte Basic empfehlen.

Also dem stimme ich zu 100% zu. Ich bin noch ein alter Amiga Coder.

Ich programmiere immer noch gerne und viel in Assembler.

Rückblickend seit über 30 Jahren.

Ich habe so ziemlich in jeder Programmiersprache gecodet die es gibt, selbst das verteufelte Brainfuck. In meiner Firma ist es so, dass zu einem Praktikum eine Einführung in die Programmier Welt ein muss ist.

Objektorientierte sprachen sind dafür eher ungeeignet.

Move AReg,DReg ist aber auch zum Einstieg nicht geeignet. Wir verwenden dafür das gute alte Microsoft "Qbasic" .Kann man sogar mit Compiler herunterladen. (Kostenlos). Für Freunde der Dosbox und Co ein muss.

Wer verstanden hat ein Sourcecode zu lesen findet sich eigentlich in jeder Sprache zu recht.

Als Übung schlage ich einen 3D Sternenflug Simulator vor. Der hat ca 30 Zeilen.

Oops ich merke , dass ich schon wieder in der alten Zeit bin.

If Hunger Then goto Aldi :

Gruß Lordy

Zitat

Als Übung schlage ich einen 3D Sternenflug Simulator vor. Der hat ca 30 Zeilen.

Oops ich merke , dass ich schon wieder in der alten Zeit bin.

Das hatte ich auch gebaut - Mit Lasern und Leuchtkugeln auf pixelige Raumschiffe schießen :DD.

Die Grafik war allerdings nicht wirklich 3D, sondern skalierte 2D-Grafik aus pixelig resizten Sprites und Circle-Line-Anweisungen auf gerade mal 320x200 Pixel Auflösung. Aber immerhin schon 8 Bit Farbtiefe.

War eine schöne Zeit.

Ich empfehle als Übung für QB: Irgendetwas, das man mit der Maus bedienen kann.

Ich würde generell nach Scratch den Einstieg in Python empfehlen. Python ist eine relativ einfache Sprache, mit wenigen, deswegen leicht zu merkenden Syntax Regeln. Nach Python würde ich C# empfehlen, da diese Sprache zwar etwas komplex ist, jedoch den perfekten Einstieg in das Programmieren bringt. Wenn ihr dann die Grundlagen von C# kennt, also alle "Console." Befehle, und evt. ein Teil der GUI Programmierung, solltet ihr Anfangen, mit Java, da diese Sprache in etwa die gleichen Regeln wie C# hat, nur eine etwas andere Syntax.

Für den Einstieg in C# würde ich das Buch Schrödinger Programmiert.

Ja, ich weiß es ist teuer, umfasst dafür aber in gut rübergebrachten Beispielen so gut wie ganz C#, sofern ihr vorhabt, euch in C# zu vertiefen.

Warum der Zwischenschritt C#?