Wer weder Pro­gram­mie­rer noch Web­de­si­gner ist, macht sich ver­mut­lich selten Gedanken darüber, was hinter den Pro­gram­men und In­ter­net­sei­ten steckt, die man täglich verwendet. Diese fußen auf z. T. sehr kom­pli­zier­ten und langen An­wei­sun­gen an Ihren Computer. Den Be­fehls­text nennt man Quellcode, Quelltext oder – auf Englisch – Source Code. Basierend auf einer be­stimm­ten Pro­gram­mier­spra­che legen Pro­gram­mie­rer alle Regeln für eine vom Computer aus­führ­ba­re Anwendung fest. Sollte der Verfasser einen un­be­merk­ten Fehler in seine Arbeit einbauen, der gegen die Vorgaben der Pro­gram­mier­spra­che verstößt, wird das Programm gar nicht erst funk­tio­nie­ren oder bei be­stimm­ten Prozessen abstürzen.

De­fi­ni­ti­on Quellcode

Als Quellcode versteht man einen für Menschen lesbaren Text, der in einer be­stimm­ten Pro­gram­mier­spra­che verfasst ist. Das Ziel des Quell­tex­tes ist es, dem Computer genaue Regeln und Vorgaben zu machen, die dieser in Ma­schi­nen­spra­che über­set­zen kann. So sind Quell­codes die Grundlage für Programme und Websites.

Was ist ein Quellcode?

Computer – egal ob der heimische PC, moderne Smart­phones oder Rechner aus Industrie und Wis­sen­schaft – arbeiten im binären System: an/aus, geladen/nicht geladen, 1/0. Eine Abfolge von Zuständen (Bits) weist den Computer an, was dieser zu tun hat. Während in den An­fangs­ta­gen der Com­pu­ter­tech­no­lo­gie noch tat­säch­lich mit diesen beiden Zuständen Befehle erstellt wurden, ist man längst dazu über­gan­gen, An­wen­dun­gen in einer vom Menschen lesbaren Pro­gram­mier­spra­che zu schreiben. Das mag zunächst seltsam klingen, denn als Laie erkennt man auch in einem Quellcode haupt­säch­lich wirres Kau­der­welsch. „Men­schen­les­bar“ ist in diesem Zu­sam­men­hang al­ler­dings als Ge­gen­be­griff zu „ma­schi­nen­les­bar“ zu verstehen. Während Computer nur mit Zah­len­wer­ten arbeiten, nutzen Menschen zur Kom­mu­ni­ka­ti­on Wörter. Genau wie Fremd­spra­chen muss man die ver­schie­de­nen Pro­gram­mier­spra­chen zunächst lernen, bevor man sie einsetzen kann.

Un­ter­schied­li­che Pro­gram­mier­spra­chen

Es gibt hunderte ver­schie­de­ne Pro­gram­mier­spra­chen. Dabei kann man nicht unbedingt sagen, dass es per se bessere oder schlech­te­re gibt, denn dies ist immer im Kontext des Projekts zu sehen und abhängig von der Anwendung, für die der Quellcode ein­ge­setzt wird. Zu den be­kann­tes­ten Pro­gram­mier­spra­chen gehören:

  • BASIC
  • Java
  • C
  • C++
  • Pascal
  • Python
  • PHP
  • Ja­va­Script

Damit der Computer diese Sprachen versteht, müssen sie al­ler­dings an­schlie­ßend in Ma­schi­nen­code übersetzt werden.

Compiler & In­ter­pre­ter

Damit Computer den von Pro­gram­mie­rern ver­fass­ten Quelltext wei­ter­ver­ar­bei­ten können, muss ein Über­set­zer zwischen beiden stehen – in Form eines zu­sätz­li­chen Programms. Diese Hilfs­an­wen­dung kann entweder in Form eines Compilers oder als In­ter­pre­ter auf­tau­chen:

  • Compiler: Dieser An­wen­dungs­typ übersetzt (kom­pi­liert) den Quellcode in einen Code, der vom Prozessor ver­stan­den und aus­ge­führt werden kann. Dieser Ma­schi­nen­code lässt sich in Form einer aus­führ­ba­ren Datei speichern.
  • In­ter­pre­ter: Ein In­ter­pre­ter übersetzt den Quellcode Zeile für Zeile und führt diesen direkt aus. Der Über­set­zungs­vor­gang läuft dadurch sehr viel schneller ab als bei einem Compiler, dafür ist die Aus­füh­rung langsamer und benötigt eine große Menge an Ar­beits­spei­cher.

Man hat nicht die freie Wahl: Die Pro­gram­mier­spra­che legt fest, ob ein Compiler oder ein In­ter­pre­ter zum Einsatz kommen muss. Heut­zu­ta­ge setzt man vermehrt auch eine Zwi­schen­lö­sung ein: Just-in-time-Kom­pi­lie­rung (JIT). Diese Art der Über­set­zung versucht die Vorteile beider Programme (schnelle Analyse und schnelle Aus­füh­rung) zu kom­bi­nie­ren und wird z. B. in Browsern ein­ge­setzt, um ef­fek­ti­ver mit Ja­va­Script, PHP oder Java umzugehen.

Aus­zeich­nungs­spra­chen

Auch beim Grund­ge­rüst einer Webseite spricht man von einem Quelltext. Grundlage hierfür ist al­ler­dings keine Pro­gram­mier­spra­che, sondern die Aus­zeich­nungs­spra­che HTML. Eine Aus­zeich­nungs­spra­che legt fest, wie ein Inhalt struk­tu­riert ist. So lassen sich mit HTML z. B. Über­schrif­ten, Absätze oder Her­vor­he­bun­gen de­fi­nie­ren. Ein HTML-Dokument ist an sich kein Programm, kann aber eines enthalten, etwa in Form von Ja­va­Script-Code. Ähnliches gilt für andere Aus­zeich­nungs­spra­chen, etwa XML.

Aufbau von Quelltext

Beim Schreiben von Pro­gram­men hält man sich – abhängig von der ver­wen­de­ten Pro­gram­mier­spra­che – an bestimmte Kon­ven­tio­nen. Die wenigsten Pro­gram­mier­spra­chen er­schei­nen al­ler­dings aus dem Nichts, die meisten bauen auf­ein­an­der auf. Deshalb kommen bestimmte Elemente immer wieder in ver­schie­de­nen Pro­gramm­codes vor:

  • Befehle: An­wei­sun­gen sind die Basis wahr­schein­lich aller An­wen­dun­gen. Hiermit macht der Pro­gram­mie­rer seinem zu­künf­ti­gen Programm klar, was es zu tun hat. Solche Befehle können z. B. bestimmte Re­chen­schrit­te auslösen oder einen Text anzeigen lassen.
  • Variablen: Variablen sind Leer­stel­len, die mit In­for­ma­tio­nen gefüllt werden können. Auf diese referiert man innerhalb des Quell­codes immer wieder mit einer zu ver­ge­ben­den Be­zeich­nung.
  • Ver­glei­che: Ent­schei­dend für den Aufbau der meisten Programme sind auch Abfragen, die etwa nach einem Wenn-dann-Schema – also nach dem Prinzip der Aus­sa­gen­lo­gik – funk­tio­nie­ren. Wenn ein be­stimm­ter Wahr­heits­wert eintritt, wird ein Ereignis ausgelöst, ansonsten ein anderes.
  • Schleifen: Abfragen können auch Grundlage für Schleifen im Quelltext sein. Ein Befehl wird so lange wie­der­holt, bis ein be­stimm­ter Wert erreicht ist. Erst dann verlässt das Programm die Schleife und führt den rest­li­chen Code aus.
  • Kom­men­ta­re: In allen gängigen Pro­gram­mier­spra­chen kann man Zeilen innerhalb des Codes aus­kom­men­tie­ren. Damit ist es möglich, Text in den Quellcode zu schreiben, der nicht vom Programm be­rück­sich­tigt werden soll. Man trägt z. B. Kom­men­ta­re in den Quelltext ein, damit man selbst oder ein anderer Ent­wick­ler auch in Zukunft Teile des Codes nach­voll­zie­hen kann.

Bei der Er­stel­lung eines Quell­codes steht immer ein Problem im Fokus. Ent­wick­ler schreiben Programme, um Lösungen an­zu­bie­ten. Der Weg dahin ist aber nicht fest­ge­legt. Wenn sich zwei Pro­gram­mie­rer mit dem gleichen Problem befassen, kann es gut passieren, dass sich die beiden Quell­tex­te deutlich von­ein­an­der un­ter­schei­den – selbst wenn sie in der gleichen Sprache ge­ar­bei­tet haben.

Auch wenn es in vielen Fällen nicht nur einen richtigen Lö­sungs­weg gibt, haben alle Pro­gram­mier­ar­bei­ten eines gemeinsam: Ein guter Quelltext sollte unnötigen Code vermeiden. Dieser macht das Programm un­über­sicht­lich, langsamer und an­fäl­li­ger für Fehler. Besonders un­über­sicht­li­chen Quellcode, den auch Profis nicht mehr durch­schau­en, nennt man Spa­ghet­ti­code, da die Struktur so verworren ist wie die langen Nudeln auf dem Teller.

Quellcode erstellen

Um einen Quelltext zu schreiben, bedarf es ei­gent­lich nur eines einfachen Text­edi­tors – wie etwa der Editor (im eng­li­schen Original Notepad) unter Windows oder TextEdit beim Mac. So speichert man den Quellcode auch als Plain-Text (z. B. in der ASCII-Kodierung oder als UTF-8) ab mit der für die Pro­gram­mier­spra­che korrekten Da­tei­na­men­en­dung. Wenn Sie also etwa eine Datei mit der Endung „.cpp“ auf Ihrer Fest­plat­te finden, dann ist auch diese ei­gent­lich eine Textdatei, enthält aber wahr­schein­lich Code in der Pro­gram­mier­spra­che C++.

Fakt

Bei den Da­tei­na­mens­er­wei­te­run­gen handelt es sich um Kon­ven­tio­nen. Das Suffix, das man in der Regel mit einem Punkt getrennt an den Da­tei­na­men anhängt, soll anzeigen, welches Format die Datei hat. Windows erkennt an der Da­tei­endung – sofern diese bekannt ist –, mit welchem Programm es die ent­spre­chen­de Datei ausführen soll. Andere Be­triebs­sys­te­me, die auf Unix basieren (z. B. macOS), be­rück­sich­ti­gen auch den Inhalt der Datei, um das Format zu bestimmen.

Text­edi­tor

Neben den Stan­dard­pro­gram­men der Be­triebs­sys­te­me gibt es aber auch er­wei­ter­te Text­edi­to­ren, die die Arbeit am Quellcode mit ver­schie­de­nen Funk­tio­nen er­leich­tern:

  • Syntax-Her­vor­he­bung: Jede Pro­gram­mier­spra­che benutzt eine eigene Syntax. In vielen Text­edi­to­ren können Sie daher zunächst die Pro­gram­mier­spra­che auswählen, in der Sie Ihren Quellcode erstellen, und im Anschluss wird das Programm ent­schei­den­de Elemente au­to­ma­tisch her­vor­he­ben. Auch Ein­rü­ckun­gen, die die Struktur im Quelltext klar machen, erstellt das Programm selbst­stän­dig.
  • Au­to­ver­voll­stän­di­gung: Viele Text­edi­to­ren für Pro­gram­mie­rer kennen die ent­spre­chen­den Befehle einer Pro­gram­mier­spra­che, ver­voll­stän­di­gen diese au­to­ma­tisch und schließen auch geöffnete Klammern von allein.
  • Klam­mer­her­vor­he­bung: Pro­gram­mier­spra­chen arbeiten mit Klammern, um Elemente zu grup­pie­ren. Damit man auch in großen Code-Do­ku­men­ten den Überblick behält, markieren manche Text­edi­to­ren die Klammen, in denen man gerade arbeitet.
  • Code-Faltung: Quellcode ist in den meisten Fällen hier­ar­chisch aufgebaut, dar­ge­stellt durch Ein­rü­ckun­gen und Klammern. Damit Sie beim Pro­gram­mie­ren mehr Überblick haben, lässt sich in manchen Text­edi­to­ren Quelltext, der sich auf tieferen Ebenen befindet, ein­klap­pen. So blenden Sie Teile des Codes aus, die momentan nicht relevant für Sie sind.
  • Compiler-In­te­gra­ti­on: Manche Text­edi­to­ren lassen sich auch durch Plug-ins mit Compilern aufrüsten. So ist es möglich, das soeben ge­schrie­be­ne Programm direkt aus­zu­pro­bie­ren.
  • Mehr­zei­li­ges Be­ar­bei­ten: Quellcode von Hand zu schreiben, kann ein sehr auf­wen­di­ges Un­ter­fan­gen sein. Deshalb sind Ent­wick­ler froh, wenn sie möglichst viele Schritte gleich­zei­tig ausführen können. Durch mehr­zei­li­ge Be­ar­bei­tung lassen sich an mehreren Stellen im Dokument iden­ti­sche Än­de­run­gen vornehmen – das spart Zeit.

In­te­grier­te Ent­wick­lungs­um­ge­bung (IDE)

Um­fang­rei­che­re Projekte lassen sich einfacher mit spe­zi­el­len Pro­gram­men rea­li­sie­ren. In­te­grier­te Ent­wick­lungs­um­ge­bun­gen fassen mehrere Werkzeuge, die Ent­wick­ler bei der Arbeit benötigen, zusammen (deshalb „in­te­griert“) und be­schleu­ni­gen so den Ar­beits­ab­lauf. Zu­sätz­li­cher Vorteil solcher IDEs ist, dass die ent­hal­te­nen Werkzeuge nahtlos un­ter­ein­an­der kom­mu­ni­zie­ren und synchron Än­de­run­gen vornehmen. Zu diesen Werk­zeu­gen gehören meistens:

  • Text­edi­to­ren: Der Text­edi­tor ist auch bei Ent­wick­lungs­um­ge­bun­gen das Kernstück. Es exis­tie­ren zwar auch wenige visuelle Pro­gram­mier­spra­chen, die über die Anordnung von gra­fi­schen Elementen funk­tio­nie­ren, doch der absolute Großteil von An­wen­dun­gen wird über einen klas­si­schen Quelltext ge­schrie­ben. Text­edi­to­ren, die Teil einer IDE sind, haben einen ähnlichen Funk­ti­ons­um­fang wie solche Editoren, die man abseits einer Umgebung fürs Pro­gram­mie­ren einsetzt.
  • Compiler/In­ter­pre­ter: IDEs umfassen auch Compiler und/oder In­ter­pre­ter. So können Pro­gram­mie­rer ihren Code direkt aus der Umgebung heraus laufen lassen.
  • Debugger: Un­er­läss­lich für eine ver­nünf­ti­ge Pro­gram­mier­ar­beit ist der Einsatz eines Debuggers, weshalb dieses Werkzeug auch ein stan­dard­mä­ßi­ger Be­stand­teil einer in­te­grier­ten Ent­wick­lungs­um­ge­bung ist. Mit diesem Tool können Sie Ihren Quellcode auf Fehler (Bugs) un­ter­su­chen, indem Sie mit Hal­te­punk­ten den Ablauf des Programms un­ter­bre­chen und die aus­ge­führ­ten Vorgänge ana­ly­sie­ren.
  • Linker: Zum Abschluss eines Kom­pi­lier­vor­gangs müssen ver­schie­de­ne Elemente zu­sam­men­ge­fügt werden. Ein Linker ist ein Programm, das diese Aufgabe übernimmt und so eine aus­führ­ba­re Datei erzeugt.
  • Ver­si­ons­ver­wal­tung: Dieses Werkzeug pro­to­kol­liert alle Än­de­run­gen, die Sie am Quelltext vornehmen, und kann ältere Versionen des Codes wie­der­her­stel­len. So ist nicht Ihr gesamtes Projekt gefährdet, wenn Sie ver­se­hent­lich einen Fehler einbauen. Eine Ver­si­ons­ver­wal­tung ist auch für die Zu­sam­men­ar­beit mehrerer Ent­wick­ler an einem Projekt un­er­läss­lich.
  • GUI-Builder: Teil vieler An­wen­dun­gen ist eine grafische Be­nut­zer­ober­flä­che (GUI). Auch diese muss natürlich über den Quellcode definiert sein. Ein GUI-Builder un­ter­stützt Ent­wick­ler beim Designen der Ober­flä­che. In Form eines WYSIWYG-Editors kann man oftmals per Drag-and-Drop grafische Elemente anordnen. Der GUI-Bilder übersetzt dies innerhalb einer IDE in Funk­tio­nen der Pro­gram­mier­spra­che.

Berühmte Beispiele für in­te­grier­te Ent­wick­lungs­um­ge­bun­gen sind das quell­of­fe­ne Eclipse oder das Microsoft-Produkt Visual Studio.

Tipp

Wussten Sie, dass sich mit „Element un­ter­su­chen“ („inspect element“) Websites im Browser un­ter­su­chen lassen?

Quelltext von Webseiten

Auch bei dem Grund­ge­rüst von Webseiten spricht man in der Regel von einem Quellcode, selbst wenn es sich dabei um ein Dokument handelt und nicht um ein Programm. Ge­schrie­ben werden Webseiten in der Aus­zeich­nungs­spra­che HTML. Generell ist es aber nicht un­ge­wöhn­lich, dass in Webseiten auch Elemente enthalten sind, die in Pro­gram­mier­spra­chen verfasst werden, etwa Ja­va­Script. Beiden Sprach­ar­ten gemein ist, dass man mit ihnen in einfachen Text­edi­to­ren schreiben kann. Demnach ließe sich auch eine Webseite komplett im Editor oder mit TextEdit verfassen.

Selbst wenn Sie nicht selbst Web­de­si­gner sind, kann es für Sie in­ter­es­sant sein, den Quellcode einer Seite im Internet zu un­ter­su­chen, um z. B. schad­haf­te Elemente zu erkennen. Alle gängigen Browser bieten Ihnen ver­schie­de­ne Mög­lich­kei­ten, um den Quelltext einer Webseite anzusehen. Auch wenn diese jeweils andere Be­zeich­nun­gen haben, finden Sie die gleichen Funk­tio­nen im Mozilla Firefox, dem Internet Explorer (bzw. Microsoft Edge) und dem Chrome-Browser von Google.

Eine Variante, den Quellcode einer Webseite sichtbar zu machen, ist das Speichern als HTML-Datei. Durch einen Klick mit der rechten Maustaste oder über das Menü können Sie die Seite her­un­ter­la­den. Wichtig dabei ist, dass Sie sich für „nur HTML“ als Dateityp ent­schei­den (wenn Sie die komplette Webseite speichern, wird Sie so angezeigt, wie sie im Browser erscheint – also inklusive aller Bilder und ohne, dass Sie HTML-Tags sehen). An­schlie­ßend können Sie die Datei mit einem Text­edi­tor öffnen. Die einfachen Editoren, die Ihr Be­triebs­sys­tem mit­lie­fert, stellen den Code höchst­wahr­schein­lich jedoch sehr un­über­sicht­lich dar. Mit einem Text­edi­tor, der einen größeren Funk­ti­ons­um­fang besitzt, können Sie den Quellcode so anzeigen, dass er leichter lesbar ist.

Aber auch ohne die Seite ab­zu­spei­chern, können Sie den Quelltext einer Webseite einsehen. Moderne Browser stellen Ihnen dafür zwei Methoden zur Verfügung: Entweder lassen Sie sich einfach den HTML-Code der kom­plet­ten Webseite anzeigen oder Sie blenden ein Ana­ly­se­tool ein, das Ihnen bei der Un­ter­su­chung des Codes hilft. Die erste Variante un­ter­schei­det sich wenig von der Dar­stel­lung der her­un­ter­ge­la­de­nen Datei. Es öffnet sich ein neuer Tab oder eine neue Seite, die den Quelltext mit Zei­len­num­me­rie­rung ge­glie­dert darstellt.

Die zweite Variante ist in­ter­es­san­ter und bietet mehr Funk­tio­nen: Das Ana­ly­se­werk­zeug finden Sie im Kon­text­me­nü unter dem Punkt „Un­ter­su­chen“ (Chrome) oder „Element un­ter­su­chen“ (Internet Explorer & Firefox). Daraufhin öffnet sich ein Bereich innerhalb des Fensters. Auch in diesem kann man sich (neben weiteren Funk­tio­nen) den Quellcode anzeigen lassen. Der Un­ter­schied zu den anderen Varianten ist, dass Sie innerhalb dieser Ent­wick­ler­werk­zeu­ge durch Bewegen des Maus­zei­gers über den Quelltext direkt die ent­spre­chen­den Elemente auf der Webseite markieren. Das heißt: Das Tool zeigt Ihnen an, welcher Teil von einer Codezeile betroffen ist. Das machen sich auch Webdesign-Profis zunutze, um z. B. die Dar­stel­lung ihrer Webseiten zu über­prü­fen.

Tipp

Die Un­ter­su­chen-Funktion können Sie auf ver­schie­de­ne Arten öffnen. Außer dem Kon­text­me­nü, das Sie über den Klick mit der rechten Maustaste öffnen, funk­tio­niert in den bekannten Browsern auch das Drücken von F12.

Ur­he­ber­recht für Quell­codes

Hinter einem Quellcode steckt jede Menge Arbeit und viel kreative Energie. Deshalb ist der Quelltext eines Programms auch durch das Ur­he­ber­recht geschützt. Genau wie bei anderem geistigen Eigentum ist es nicht gestattet, den Code eines Dritten ei­gen­mäch­tig zu ver­brei­ten oder zu pla­gi­ie­ren. Dies gilt vor allem für so­ge­nann­te pro­prie­tä­re Software.

Anders sieht es mit quell­of­fe­nen Pro­gram­men aus. Gerade im Bereich der Software-Ent­wick­lung gibt es eine sehr aktive Open-Source-Szene, in der sehr viel freier mit Code um­ge­gan­gen wird. Sinn dieser offenen Kultur unter Ent­wick­lern ist es, gemeinsam an Projekten zu arbeiten und so auch lang­fris­tig Software wei­ter­zu­ent­wi­ckeln und zu ver­bes­sern. Bei GitHub, SourceF­or­ge oder anderen ver­gleich­ba­ren Platt­for­men stellen Ent­wick­ler Quellcode für andere Pro­gram­mie­rer zur weit­ge­hend freien Verfügung bereit. Al­ler­dings müssen sich Ent­wick­ler von Open-Source-Pro­gram­men in der Regel auch an bestimmte Auflagen halten, also z. B. Urheber und Lizenz nennen, wenn sie den Code verwenden wollen.

Zum Hauptmenü