• Aller Anfang ist leicht!

    Warum JavaScript? Ganz einfach - JavaScript ist auf nahezu jedem Computer verfügbar. Denn ein Browser, der JavaScript ausführen kann, gehört heute zur Grundausstattung aller gängigen Betriebssysteme. Du nutzt den teuren (oder treuen) Laptop der Familie oder das Arbeitsgerät von Onkel Oswald? Kein Problem: JavaScript kann nichts kaputtmachen. JavaScript kann keine Dateien löschen oder verändern, die sich auf dem Computer befinden. 

    Du willst gleich losgehen? Dem Computer endlich mal etwas sagen, was er für dich tun kann? Worauf wartest du? An die Tasten, fertig, los!

    • Ein erstes Hallo, schlicht und einfach

      Eigentlich ist es ganz einfach, ein erstes Programm in JavaScript zu schreiben. Du brauchst dazu nur einen simplen Editor, der stets mit Windows (oder MacOS) mitinstalliert wird. In Windows heißt der Editor Notepad. Du brauchst auch einen Browser, das ist das Programm, mit dem du im Internet surfst oder Dateien von dort herunterlädst. Also, z.B Chrome von Google oder Edge von Miscrosoft.

       

      Probieren wir aus, wie wir den Browser zum Hallo-Sagen bringen:


      Klicke mit der rechten Maustaste auf den Desktop, ein Kontextmenü öffnet sich, klicke dort auf Neu und dann auf Textdokument.



       

      Auf dem Desktop findest du nun ein neues Symbol.



       

      Wenn du auf diesem Symbol doppelklickst, öffnet sich kurze Zeit später der zugehörige Editor und bietet dir ein leeres Fenster an.

      Bevor wir da etwas hineintippen, speichern wir die noch leere Datei unter einem passenden Namen:

      Klicke im Editor oben auf Datei und dann auf Speichern unter

       


       

      Gib der Datei den Namen index.html und klicke dann auf Speichern.

       

      Gut zu wissen!

      index heißt unsere Datei, weil sie so vom Browser als Standartdatei einer vermeintlichen Homepage bzw. Webseite interpretiert wird. Das siehst du gleich nach dem Start. HTML ist eine Beschreibungssprache, die den Aufbau einer Webseite beschreibt.

       

      Tippe ein:

       


       

      Dann speichere das Ganze.

       

      Und nun kommen wir zu dem, was du als Symbol auf dem Desktop sehen kannst    

       

      Wie das Dateisymbol für index.html aussieht, hängt davon ab, welcher Browser dein Standard-Browser ist. (z.B mein ist Mozilla Firefox)

       

      Doppelklicke auf das Symbol mit dem Namen index.html.

       


       

      Der Browser öffnet sich und zeigt ein einfaches, aber nettes „Hallo“. Womit du dein erstes Programm geschafft hast – allerdings nicht in reinem JavaScript. Lediglich die Zeile in der Mitte ist in der Mitte ist in JavaScript geschrieben, das Drumherum ist aber nötig, damit der Browser weiß, dass es um JavaScript geht.

      Du kannst gerne mal das „Halo“ durch einen anderen (längeren) Text ersetzen, um zu sehen, wie das im Browser aussieht. Probiere es mal!


    • Die Wahl der Waffen: Installation von Code-Editor

      Während der einfache Texteditor am Anfang ausreichen mag, wird er zunehmend unbequem, wenn wir größere Projekte gestalten wollen. Deshalb steigen wir an dieser Stelle um auf sogenannten Quelltext-Editor Visual Studio Code von Microsoft.

      Bevor wir aber damit arbeiten können, muss Visual Studio Code erst installiert werden. Keine Sorge – dieser Editor ist kostenlos und lässt sich sehr einfach installieren.

      Wichtig!

      Falls du Probleme mit der Installation hast, schreib mir bitte eine Nachricht und ich helfe dir die Probleme zu beheben. Oder alternativ können wir das während der Videokonferenz machen.

      Öffne nun deinen Browser und gib dort diese Adresse ein:

      https://code.visualstudio.com/

      Klicke dort auf den Eintrag „Download for Windows“ (Oder MacOS)



      Und einige Zeit später landet das Startprogramm auf deiner Festplatte. Wahrscheinlich im Download-Ordner (je nach dem, was du für deinen Browser als Download-Ziel eingestellt hast)

      Doppelklicke dort auf VSCodeUserSetup



      Zur Begrüßung erwartet dich ein solches Bild:



      Markiere den Text „Ich akzeptiere die Vereinbarung“ und klicke auf „Weiter“



      Wenn du willst, kannst du den Ordner wählen, in den VS-Code installiert werden soll.



      Lass alles, wie es ist und klicke auf „Weiter“



      Nun gibt es einiges auszuwählen.



      Nun hast du alles beisammen. Klicke auf „Installieren“

      Und jetzt wird installiert, es kann einiges an Wartezeit auf dich zukommen. Zum Schluss erscheint diese Meldung:



      Super! Klicke auf „Fertigstellen“

      Visual Studio Code sollte jetzt gestartet werden.

    • Erste Schritte


      Das Allererste aber, was erledigt werden muss, ist das Erzeugen eines Ordners, in dem alle unsere JavaScript Projekte gespeichert werden sollen. Ich schlage vor, ihn einfach Projekte zu nennen.



      Zurück zum VS-Code-Editor. Lass dich durch den Inhalt dieses Fenster nicht verwirren:



      Hä? Alles auf English?

      Keine Sorge – für den Kurs musst du natürlich kein English-Experte sein. Allerding ist es von Vorteil, wenn du einige Englische Worte verstehen kannst, da alle Programmiersprachen auf English basieren. Wenn das nicht der Fall ist, nicht schlimm, ich übersetze alle wichtigen Befehle ins Deutsche 😉


      Uns interessiert jetzt das, was unter Start steht. Bevor wir eine neue Datei erstellen, will VS Code wissen, welchen Ordner wir für unser Programmprojekt ausgewählt haben.

      Klicke also auf „Open Folder“



      Im Dialogfenster suchst du nun den Unterordner „Projekte“ (den du vorher erstellt hast).



      Klicke abschließend auf „Ordner auswählen“

      Es kann sein, dass so eine Meldung erscheint:



      Klicke auf „Yes, I trust the authors“, um das Fenster zu schließen.

      Das Aussehen des Fensters von VS Code hat sich nun ein wenig geändert. Klicke auf das Symbol, das ich markiert habe, um eine neue Datei zu erstellen.



      Gib den Namen index.html ein und speichere das mit der Eingabetaste.


    • HTML

        HTML? Ich will doch JavaScript lernen!

      Wenn du eine Webseite besuchst, siehst du Text, Bilder und Links, die auf verschiedene Weise angeordnet sind. HTML ist die Sprache, die verwendet wird, um diese Anordnung zu definieren und eine Webseite zu strukturieren.

      JavaScript ist eine andere Sprache, die verwendet wird, um eine Webseite dynamischer zu machen. Das bedeutet, dass du mit JavaScript auf die HTML-Struktur der Seite zugreifen und sie ändern kannst, um Dinge wie Animationen, Spiele oder interaktive Elemente hinzuzufügen.

      Deshalb ist es wichtig, HTML-Grundlagen zu kennen, wenn du in JavaScript programmieren möchtest, da HTML die Grundlage bildet, auf der du mit JavaScript aufbauen kannst, um eine tolle Webseite zu erstellen.

       

      Erinnerst du sich an unser erstes Programm, das wir geschrieben haben? Das sah so aus:

      Ich habe schon erwähnt, dass nur die Mitte in JavaScript geschrieben ist. Das Drumherum <script> ... </script> ist aber nötig, damit der Browser weiß, dass es um JavaScript geht.

      So ein Befehl, Tag genannt, hat immer einen Anfang (<script>) und (mit wenigen Ausnahmen) auch ein Ende(</script>). Dazwischen steht der Inhalt (document.write(„Hallo“)).

      So können wir den Text z.B. dick machen:


      Probiere es aus. Speichere dein Programm und klicke auf das Symbol im Ordner doppelt.

      Dann öffnet sich das Browser und du solltest so eine Web-Seite sehen können:


      Wow!

      Hast du es bemerkt? Wenn du anfängst, den Code zu schreiben, schlägt VS Code automatisch Wörter vor, die du gerade tippen möchtest. Das ist besonders hilfreich, wenn du dir nicht sicher bist, wie du eine bestimmte Zeile Code schreiben sollst oder einfach Zeit sparen möchtest. Ein guter Programmierer ist faul! 😉


      Der Schlüssel zum Erfolg.

      Das ist es im Wesentlichen, was HTML ausmacht. Das Prinzip ist eingängig, und auch die Befehle sind nicht schwer. Du kannst das sehr gut an einem Beispiel sehen:

      Wir nehmen einfach diesen Absatz und schreiben ihn als HTML.



      Speichere den Code und öffne deine index-Datei. So stellt sich das im Browser dar:


      Für die erste vollständige Webseite fehlt jetzt nur noch der passenden Rahmen. Jede Webseite hat einen festgelegten Rahmen. Ein paar Formalitäten, ein klein wenig „Drumherum“, müssen eben doch sein:


      • Das HTML-Dokument beginnt mit dem <!DOCTYPE html>-Tag, der den Browser darüber informiert, dass es sich um ein HTML5-Dokument handelt.
      • Dann folgt das <html>-Tag, das den Beginn des Dokuments markiert. Alles, was in deinem Dokument enthalten ist, sollte innerhalb dieses Tags platziert werden.
      • Der <head>-Tag enthält Informationen über das Dokument, wie z.B. den Titel der Seite, der im Browser-Tab angezeigt wird.
      • Der <body>-Tag enthält den Inhalt der Webseite, wie z.B. Text, Bilder und Links.
      • Die Überschrift <h1> sagt dem Browser, dass dies die größte Überschrift auf der Seite ist.
      • Der <p>-Tag wird verwendet, um einen Absatz zu definieren, der Text enthält.
      • Das <b>-Tag kennst du schon, es macht den Text fett.
      • Die <ul> und <li>-Tags werden verwendet, um eine Liste zu definieren. ul steht für eine ungeordnete Liste, und li steht für einen einzelnen Listeneintrag.
      • Das <a>-Tag wird verwendet, um einen Link zu einer anderen Webseite zu erstellen. Der href-Attribut gibt den Link zur Ziel-Webseite an.

       

      Das ist nur ein einfaches Beispiel für eine HTML-Webseite, aber es gibt noch viele weitere Tags und Attribute, die man lernen kann.


      Probiere das Programm selbst aus und schau, was für eine Webseite wir erstellt haben!



    • Icon Aufgabe
      Aufgabe 1