Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Programmierung: Basiswissen

Ihr erstes Programm in JavaScript

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
JavaScript ist eine interpretierte Sprache, die keinen Compiler für die Erzeugung des Maschinencodes benötigt. Es muss ein Programm erzeugt werden, welches in einem anderen abläuft. Dieses Video zeigt die Erstellung eines einfachen „Hallo Welt“-Programms.

Transkript

Lassen Sie uns also die Hände auf die Tastatur legen und JavaScript programmieren. Sie wissen, JavaScript ist eine interpretierte Sprache, und das macht es leicht für uns, damit zu experimentieren, weil wir eben keinen Compiler brauchen, der den Maschinencode erzeugt. Auf der anderen Seite können wir nicht einfach Code erzeugen, der dann eigenständig läuft. Wir müssen ein Programm erzeugen, das seinerseits innerhalb eines anderen Programms abläuft. Das ist nichts ungewöhnliches. Sie können sich das so vorstellen: Wir haben unseren Computer, und dieser Computer hat ein Betriebssystem. Innerhalb dieses Betriebssystems, da starten wir den Webbrowser. Und dieser Webbrowser öffnet eine Webseite und erst diese Webseite ruft das JavaScript auf und führt es aus. Wenn das für Sie ziemlich viele Levels sind, dann machen Sie sich keine Sorgen. Das Meiste davon läuft ja eh schon, bis hin zum Webbrowser. Das Einzige worum wir uns kümmern müssen, ist letzten Endes die letzte Ebene. Wir brauchen eine Webseite, die sich im Webbrowser öffnet, und diese Webseite wird der Container sein, für das JavaScript-Programm, das wir schreiben. D. h., als Erstes brauchen wir diese Webseite. Wir müssen uns nicht um Grafik kümmern, auch nicht um einen Webserver oder sowas dergleichen. Eine einfache Webseite genügt vollkommen. Diese Webseite hat eben nur einen einzigen Grund: Wir sagen ihr: "Hole die JavaScript-Datei und führe sie aus." Ich bin jetzt im Ordner für die Projektdateien, und da sehe ich zwei Dateien: Einerseits container.html und zum anderen script.js. Das Erste, das ist eine HTML-Datei, die nichts anderes als diesen Container bereitstellt, innerhalb dessen eben unser JavaScript-Programm ausgeführt wird. Und dieses JavaScript-Programm, das finden wir in der Datei script.js. Wenn ich container.html doppelklicke, dann geht hier mein Standardbrowser auf, in dem Fall ist es Firefox, es kann aber natürlich auch der Internet Explorer sein oder Safari oder Google Chrome. Und ich sehe hier nichts anderes als eine sehr einfache HTML-Seite. Ich möchte noch zwei Anmerkungen machen. Das eine bezieht sich auf diese Dateinamen-Erweiterungen. Je nachdem wie Sie ihr Betriebssystem konfiguriert haben, kann es sein, dass Sie diese Dateinamen-Erweiterungen gar nicht sehen. Ich zeige Ihnen das mal: Also wenn ich hier in diesem Beispiel container.html habe und ich blende das Suffix aus, dann sehen Sie, wird hier nur container angezeigt, aber nicht .html. Wir, als Programmierer und Programmiererinnen, sind aber darauf angewiesen, dass wir wissen, was für eine Art von Datei es ist, und deswegen brauchen wir unbedingt diese Suffixe. Wenn wir die nicht haben, kann es auch sein, dass wir bspw. manchmal glauben, wir vergeben ein entsprechendes Suffix, aber im Geheimen wird nochmal zusätzlich eine zweite Dateinamen-Erweiterung angefügt und dann funktioniert einiges nicht. Deswegen ganz wichtig, diese Suffixe eben nicht ausblenden, sondern hier anzeigen. Das Zweite ist, die eigentlichen Dateinamen, also das was vor dem Punkt steht, die müssen unbedingt nur aus den normalen Buchstaben A bis Z bestehen, sie dürfen keine Sonderzeichen wie ä, ö, ü oder ß haben, sie sollten auch insbesondere keine Leerzeichen enthalten. Leerzeichen sind oftmals auch ein Trenner für verschiedene Befehle, und wenn wir auf eine Datei zugreifen wollen, die ein Leerzeichen hat, dann kommen wir ganz schnell in die Bredouille, weil wir da eben schauen müssen, handelt es sich um ein Trennzeichen oder gehört das noch zum Dateinamen und so weiter. Das kann man umgehen, ist aber relativ kompliziert, und das braucht es einfach nicht, wenn wir uns daran halten, das wir ausschließlich Kleinbuchstaben A bis Z verwenden, Zahlen, das Minuszeichen und den Unterstrich, und alles andere sind Sonderzeichen, die in normalen Dateinamen eigentlich nichts verloren haben. Jetzt möchten wir mal unter die Haube schauen und uns den Quellcode von dieser HTML-Datei anschauen. Ich klicke sie mit rechts an, gehe jetzt auf Öffnen mit und in diesem Fall, weil ich auf Apple arbeite, sehe ich hier TextEdit, das ist ein Standardprogramm, das automatisch mit einem Computer schon ausgeliefert wird. Ich mache das extra damit, damit Sie sehen, dass Sie zum Programmieren lernen, keine besondere Software brauchen. Wenn Sie Windows verwenden, dann haben Sie hier in diesem Kontextmenü den Notepad Editor, der im Endeffekt so ähnlich wie TextEdit funktioniert und uns direkt den Quelltext einer Datei anzeigt. Die öffne ich jetzt mal, und Sie sehen, das ist eine sehr einfache HTML-Seite. Aber wir sehen hier noch keinen Code, wir sehen noch keine spitzen Klammern, wir sehen keine Variablen, geschweiften Klammern usw. Das liegt daran, dass dieser Editor momentan noch anders eingestellt ist, also eine reine Softwarefrage von diesem Editor. Ich gehe jetzt hier auf die entsprechenden Einstellungen, und da sehen Sie, beim Öffnen von Dateien möchte ich, dass HTML-Dateien auch als HTML-Code, anstelle von formatiertem Text, angezeigt werden. Das klicke ich hier an. Ich gehe jetzt mal auf Neues Dokument und ich möchte auch hier, dass geöffnete Dokumente als reiner Text dargestellt werden und als nichts anders. Die Schriftart kann ich hier, um es besser lesbar zu machen, auch ein bisschen größer machen. Ich gehe mal auf Schriftgröße 14, damit ich das nachher auch besser sehen kann. Ganz wichtig ist auch für deutschsprachige Betriebssysteme, dass wir diese sogenannten intelligenten Anführungszeichen ausschalten. D.h. intelligente Anführungszeichen, die sorgen dafür, dass wenn ich dieses normale Anführungszeichen oben schreibe, dass es beim ersten Mal nach unten gesetzt wird, so wie es im Deutschen auch üblich ist, aber was wir hier brauchen ist tatsächlich die original Anführungszeichen oben und nicht eine mehr oder weniger intelligente deutsche Variante davon. Ich mache das Ganze jetzt zu und dann öffne ich das Ganze nochmal mit dem Kontextmenü, TextEdit. Und dann sehen Sie, habe ich hier genau den Quelltext, den ich eigentlich haben möchte. Also das ist eine sehr einfach HTML-Seite, das sehe ich hier nochmal, und ich sehe hier unterschiedliche HTML-Tags, die eben hier den Kopfbereich definieren, den Body Bereich und eben das, was wir gerade auch auf der Seite gesehen haben. Wir möchten uns hier allerdings gar nicht beim HTML aufhalten. HTML ist ja gar keine Programmiersprache, streng genommen, sondern es ist eine Auszeichnungssprache. Ich kann mit HTML nicht rechnen, ich kann mit HTML auch keine Schleifen programmieren, sondern mit HTML kann ich nur sagen: "Das hier soll der Kopfbereich sein, der Titel soll Einfache Seite lauten und hier soll eben der Inhalt dieser Seite zu sehen sein." Mehr kann ich damit nicht machen. HTML ist ja auch die Abkürzung für Hypertext Markup Language und Markup Language heißt auf deutsch Auszeichnungssprache. Es ist eben keine Programmiersprache. Da habe ich jetzt vielleicht ein bisschen Haare auf den Zähnen, zwischen Programmiersprache und Auszeichnungssprache zu unterscheiden, aber wir lernen gerade das Programmieren, und deswegen ist es wichtig, dass wir hier auch sauber darauf achten, was wir hier auch vor uns haben. Das Eigentliche, weshalb wir in dieser Datei uns gerade befinden, das ist diese Zeile, Script Source, script.js, d.h., hier verweise ich auf das eigentliche JavaScript-Programm, das sich in dieser anderen Datei befindet, und nur deswegen brauche ich hier dieses HTML. Jetzt gehen wir mal in diese Script Datei hinein, das ist auch eine ganz normale Text Datei, ich öffne sie mit dem Rechtsklick, gehe auf TextEdit und da sehen Sie, hier steht erstmal nichts drin. Sie ist noch leer, und da schreiben wir jetzt unseren allerersten JavaScript-Befehl rein. Der lautet: "Alert", das sind diese mehr oder weniger nervigen Pop-Up-Boxen, die manchmal auf Seiten auftauchen und wir möchten da natürlich eine Botschaft reinschreiben und üblicherweise fängt man, wenn man eine neue Programmiersprache anfängt zu lernen, damit an, dass man Hallo Welt schreibt. Also, "Alert", das ist der feststehende Begriff, runde Klammern auf und jetzt kommen diese Anführungszeichen, die eben nicht nach unten wechseln dürfen und hier schreibe ich jetzt mal mein Hallo Welt hinein. Ich mache die Anführungszeichen wieder zu. Jetzt muss ich die runde Klammer noch zumachen und wie bei den allermeisten JavaScript-Befehlen, muss ich auch hier am Ende der Zeile einen Strichpunkt schreiben. Das ist unser erster Befehl. Ich speichere das Ganze ab, schließe das wieder und jetzt kann ich mit einem Doppelklick meinen container.html wieder öffnen, und da sehen Sie die sehr einfache HTML-Seite, und hier in der Mitte ist dieses mehr oder weniger nervige Pop-Up-Böxchen aufgegangen und hier steht genau dieser Text Hallo Welt. Je nachdem wie Sie Ihr Betriebssystem eingestellt haben, oder ob Sie unter Apple, Linux oder Windows arbeiten, sieht hier dieses Pop-Up-Fenster ein bisschen anders aus, aber im Kern ist es immer das Gleiche. Ein Pop-Up-Fenster und ich muss erst hier auf OK klicken, damit das Ganze wieder weggeht. Was ist hier passiert durch diesen Doppelklick? Ich habe eben dieses HTML-Dokument in meinem Browser, in dem Fall Firefox, geöffnet und innerhalb dieses Browsers wurde ja, wenn wir uns hier den Quelltext noch einmal genauer anschauen, auf dieses script.js verwiesen und innerhalb dieses script.js steht dann eben unser Alert-Befehl mit der Hallo Welt-Box. Das ist noch ein sehr einfaches Beispiel, aber wir werden uns jetzt eben genauer anschauen, was man mit JavaScript noch alles anderes machen kann.

Grundlagen der Programmierung: Basiswissen

Steigen Sie ein in die Welt der Computerprogrammierung und verschaffen Sie sich das Grundwissen, um schon bald eigene Lösungen und Anwendungen zu schreiben.

5 Std. 38 min (64 Videos)
Programmieren Lernen - Grundlagen
Helmut B.

sehr verständlich!!! Schade, dass der Dozent die langatmigen Geschlechtsunterscheidungen trifft (Liebe zukünftigen Progammiererinnen und Programmierer) Und das einige Leichtsinnsfehler auftreten (z.B. beim Kapitel, in dem die Anführungszeichen im Code erklärt werden). Trotzdem, sehr gut!

 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!