JavaScript Grundlagen PDF

JavaScript Grundlagen Inhalt Inhaltsverzeichnis V3 1 WAS IST JAVASCRIPT? 4 1.1 WAS HAT HTML UND CSS MIT JAVASCRIPT ZU TUN? 5 HTML...

JavaScript Grundlagen Inhalt Inhaltsverzeichnis V3 1 WAS IST JAVASCRIPT? 4 1.1 WAS HAT HTML UND CSS MIT JAVASCRIPT ZU TUN? 5 HTML 5 CSS 5 JAVASCRIPT 5 2 DER EDITOR 6 2.1 PROGRAMMAUFBAU 7 2.2 DER PROJEKTORDNER 7 3 JAVASCRIPT IN EINE WEBSEITE EINBINDEN 9 3.1 JAVASCRIPT INNERHALB DER HTML-DATEI 9 3.2 EXTERNE JAVASCRIPT DATEI ERSTELLEN UND EINBINDEN 9 4 ERSTES JAVASCRIPT BEISPIEL 11 5 DIE KONSOLE 13 6 VARIABLEN 15 6.1 NAMENSREGELN 16 6.2 EINGABE- UND AUSGABE VON ZEICHENKETTEN 17 6.3 DATENTYPEN 18 6.4 KONSTANTEN 20 6.5 VARIABLEN SPEICHER 20 6.6 DAS SCHLÜSSELWORT VAR 20 7 BERECHNUNGEN MIT JAVASCRIPT 21 7.1 RECHENOPERATOREN 21 7.2 ZUWEISUNGSOPERATOREN 22 7.3 PLUS-OPERATOR MIT ZEICHENKETTEN (STRING) 24 7.4 PARSEINT() UND PARSEFLOAT() 25 7.5 ÜBUNGEN – BERECHNUNGEN 27 8 VERZWEIGUNGEN 28 8.1 WAHRHEITSWERTE (BOOLESCHE WERTE) 28 8.2 DER VERGLEICHSOPERATOR IST-GLEICH 29 8.3 EINFACHE VERZWEIGUNG – IF-BLOCK 29 8.4 IF-ELSE-ANWEISUNG 30 8.5 ELSE-IF 31 8.6 MEHRERE BEDINGUNGEN VERKNÜPFEN 33 8.7 ZUFALLSZAHL UND EINGABE VON ZAHLEN PRÜFEN 35 8.8 BOOLEAN IN EINER IF-VERZWEIGUNG 36 8.9 IF SHORTHAND SCHREIBWEISE 37 © |edvgraz| Seite 1 Inhalt JavaScript Grundlagen 9 SCHLEIFEN 38 9.1 DIE FOR-SCHLEIFE (ZÄHLSCHLEIFE) 38 9.2 WHILE-SCHLEIFE (KOPFGESTEUERT) 40 9.3 DO-WHILE-SCHLEIFE (FUßGESTEUERTE SCHLEIFE) 42 10 ARBEITEN MIT STRINGS 46 10.1 INDEXOF() UND LASTINDEXOF() 47 10.2 SUBSTRING() 49 11 KOMMENTARE 50 11.1 EINZEILIGER KOMMENTAR 50 11.2 MEHRZEILIGE KOMMENTARE 50 12 ARRAYS 51 12.1 AUF INHALTE DES ARRAYS ZUGREIFEN 52 12.2 ARRAY SCHLEIFEN MIT JAVASCRIPT 53 FOR…OF SCHLEIFE 54 12.3 METHODEN ZUM ARBEITEN MIT ARRAYS 54 12.4 DIE PUSH() METHODE 55 12.5 DIE POP() METHODE 55 12.6 DIE SLICE() METHODE 57 12.7 DIE SORT() UND REVERSE() METHODEN 57 12.8 DIE CONCAT() METHODE 58 12.9 DIE JOIN() METHODE 59 12.10 MEHRDIMENSIONALE ARRAYS 61 13 VERSCHACHTELTE SCHLEIFEN 63 14 FUNKTIONEN 66 14.1 ERSTELLEN EINER FUNKTION UNTER VERWENDUNG EINER FUNKTIONSDEKLARATION 66 14.2 ERSTELLEN EINER FUNKTION UNTER VERWENDUNG EINES FUNKTIONSAUSDRUCKS 66 14.3 ÜBERGABEPARAMETER 67 14.4 RÜCKGABEWERT (RETURN) 68 14.5 ARROW FUNCTIONS (KURZSCHREIBWEISE) 70 14.6 FOREACH-SCHLEIFE 72 15 DEBUGGING UND FEHLER FINDEN 73 15.1 DEBUGGING MIT CHROME ENTWICKLERTOOLS (F12) 73 BREAKPOINT SETZEN 74 16 PROJEKT AUFGABE – SCHERE, STEIN, PAPIER 76 Seite 2 © |edvgraz|  Grundlagen der Programmierung mit JavaScript Was ist JavaScript? JavaScript Grundlagen 1 Was ist JavaScript? JavaScript ist eine objektorientierte Programmiersprache, die heute vielseitig eingesetzt wird. Grundsätzlich wurde die Sprache 1995 entwickelt, um das Web interaktiver und dynamischer zu gestalten. JavaScript ermöglicht es Ihnen Daten und Benutzer*innen-Eingaben auszuwerten und erweitert die Möglichkeiten von HTML und CSS. Sie finden JavaScript heute aber auch außerhalb von Browsern, zum Beispiel auf Servern, Desktop- oder Mobilen-Anwendungen sowie zur Ansteuerung von Microcontrollern. In diesem Skript werden wir uns vor allem auf die Frontend Webentwicklung mit JavaScript konzentrieren. Sie werden die Grundlagen der Programmierung lernen und wie Sie Webseiten dynamisch verändern können. Zum Schluss werden Sie noch mit JQuery, einer bekannten JavaScript Bibliothek arbeiten und dessen Vorzüge kennen lernen. JavaScript ist eine sogenannte Interpreter-Sprache. Das bedeutet, der Programmiercode muss von einem sogenannten Interpreter während der Laufzeit in Maschinencode übersetzt werden. Hier wird die Programmiersprache in für den Computer verständlichen Code übersetzt. Maschinencode- Quelltext Interpreter sequenz Für interpretierte Sprachen benötigen Sie eine sogenannte Laufzeitumgebung, die auf dem jeweiligen Ziel-System installiert werden muss. Bei JavaScript bietet sich hier ein normaler Webbrowser an, diese haben alle bereits eine JavaScript-Laufzeitumgebung integriert und können somit JavaScript interpretieren. Sie können also davon ausgehen, dass Ihr geschriebener JavaScript Code auf allen Zielrechnern funktioniert, sobald dort ein Browser installiert ist. Es kann höchstens zu Problemen kommen, wenn eine Benutzerin * ein Benutzer JavaScript bewusst im Browser deaktiviert. Bei diesen Benutzerinnen * Benutzern wird dies jedoch bei vielen Webseiten zu Darstellungs- und Funktionsproblemen führen. Seite 4 © |edvgraz| JavaScript Grundlagen Was ist JavaScript? 1.1 Was hat HTML und CSS mit JavaScript zu tun? Für die Frontend Entwicklung von Webseiten sind HTML, CSS und JavaScript die wichtigsten Sprachen. Dabei erfüllt jede Sprache Ihre eigenen Aufgaben. HTML HTML ist für die Struktur und den eigentlichen Inhalt einer Webseite verantwortlich. Mit HTML beschreiben Sie die jeweiligen Inhalte, wie zum Beispiel die Navigation oder ein Formular usw. Es gibt den einzelnen Elementen der Webseite Ihre Bedeutung (Semantik). CSS Mit CSS bestimmen Sie das Aussehen und Layout einer Webseite. Sie können zum Beispiel Farben, Schriften und Positionen bestimmen. Mit sogenannten CSS-Regeln wird der zuvor erstellte HTML Code selektiert und dessen Darstellung bestimmt. JavaScript Mit JavaScript gestalten Sie Webseiten dynamischer. Sie erhöhen die Interaktivität der Webseite, wie zum Beispiel die Möglichkeit eine Tabelle zu sortieren. Sie bringen Interaktion auf Ihre Webseite, wie zum Beispiel das Aufklappen eines neuen Inhaltsbereichs mit einem Klick. Die meisten Webseiten verwenden daher alle drei Sprachen, HTML, CSS und JavaScript. Sie können natürlich auch nur mit HTML und CSS eine schöne Webseite gestalten, jedoch würde dabei die Interaktivität und Benutzer*innenfreundlichkeit leiden. Sowie Sie auch nur mit HMTL eine Webseite gestalten könnten, nur würde diese nicht sehr schön aussehen. HTML (Struktur) Webseite CSS JavaScript (Interaktion) (Layout) Für dieses Skriptum benötigen Sie grundlegende Kenntnisse in HTML und CSS. Vor allem wird der JavaScript Code dadurch verständlicher. © |edvgraz| Seite 5 Der Editor JavaScript Grundlagen 2 Der Editor Zum Schreiben Ihrer JavaScript Programme genügt ein normaler Texteditor. Es gibt unzählige Editoren am Markt. Sie können jeden gängigen HTML-Editor verwenden. In diesem Skript verwenden wir den HTML-Editor Visual Studio Code. Dieser Editor bietet viele Funktionen und Hilfestellungen sowie die Möglichkeit, Funktionalitäten über PLUG-INS zusätzlich zu erweitern. Visual Studio Code ist ein Open Source-Programm, das Sie demnach gratis downloaden und verwenden können. Das Programm ist auf Ihrem Schulungsrechner bereits installiert. Möchten Sie es für zu Hause herunterladen, finden Sie den Download unter https://code.visualstudio.com. Seite 6 © |edvgraz| JavaScript Grundlagen Der Editor 2.1 Programmaufbau Code Ansicht 2.2 Der Projektordner Sie werden Ihren JavaScript Code über eine HTML-Datei Ausführen. Dazu benötigen Sie wie bei jedem Webprojekt einen Projektordner. In Visual Studio Code müssen Sie dazu einen Basisordner definieren. Übung - Basisordner definieren Erstellen Sie auf D:\ einen neuen Ordner und Kopieren Sie Ihren Übungsordner dort hin. Wählen Sie den Übungsordner in Visual Studio Code als Basisordner aus. 1. Öffnen Sie den Windows Explorer (Win + E) und erstellen Sie unter D:\ einen neuen Ordner. Benennen Sie den Ordner mit Ihrem eigenen Namen. 2. Wechseln sie in Ihren Übungsordner (Schulung) und kopieren Sie die Ordner JavaScript\JS_Teil1 in den unter Punkt 1 erstellen Ordner. 3. Öffnen Sie Visual Studio Code und führen Sie oben einen Einfachklick auf das Symbol EXPLORER aus. 4. Klicken Sie auf DATEI und danach auf ORDNER ÖFFNEN. © |edvgraz| Seite 7 Der Editor JavaScript Grundlagen 5. Wählen Sie im Explorer den oben kopierten Ordner IhrName\JS_Teil1 aus. --------------- Ende der Übung --------------- Seite 8 © |edvgraz| JavaScript Grundlagen JavaScript in eine Webseite einbinden 3 JavaScript in eine Webseite einbinden Um JavaScript in eine Webseite einbinden zu können gibt es ähnlich wie bei CSS verschiedene Möglichkeiten. Sie können mit einem Script-Tag den JavaScript Code innerhalb der HTML-Datei definieren. Sie können aber auch eine externe JavaScript (.js) Datei erstellen und diese ähnlich der CSS-Datei verknüpfen. 3.1 JavaScript innerhalb der HTML-Datei Sie können den Script-Tag wie jeden anderen HTML-Tag verwenden. Der darinstehende Code wird automatisch als JavaScript Code interpretiert und ausgeführt. Im oberen Codebeispiel wird lediglich eine Textnachricht ausgegeben. Diese Art der Einbindung ist zwar möglich und erlaubt, professioneller ist es jedoch eine externe JavaScript Datei zu erstellen. 3.2 Externe JavaScript Datei erstellen und einbinden Wie oben schon erwähnt ist es professioneller eine externen JavaScript Datei zu erstellen und diese mit dem HTML-Dokument zu verknüpfen. Sie können eine JavaScript Datei wie gewohnt im Texteditor sowie im Windows-Explorer erstellen. Damit sie auch als JavaScript Datei erkannt wird, muss die Dateiendung.js lauten. Die externe JavaScript Datei müssen Sie auch in die HTML-Datei einbinden. Dies können Sie mit folgendem Code durchführen. Im oberen Beispiel heißt die JavaScript Datei bsp1.js und befindet sich im Unterordner script. Wenn Sie JavaScript als externe Datei einbinden dürfen Sie keinen Code innerhalb der Script-Tags schreiben. Noch vor ein paar Jahren wurde das Script ähnlich wie eine externe CSS-Datei im Head Bereich des HTML-Dokuments positioniert. Mittlerweile positionieren Sie wie oben ersichtlich den Script-Tag vor dem Body-Schließen-Tag. Wenn der Browser ein Script Tag vorfindet, wird der Code darin sofort heruntergeladen und ausgeführt sowie das weitere Laden der Webseite pausiert. Dabei treten zwei Hauptnachteile auf: © |edvgraz| Seite 9 JavaScript in eine Webseite einbinden JavaScript Grundlagen  Die Ladezeit der Webseite dauert gefühlt länger  Manchmal bezieht sich der JavaScript-Quelltext auf ein HTML-Dokument. Wenn Sie die JavaScript Datei im Head ausführen, wird jedoch das weitere HTML pausiert und das jeweilige Element kann im Script daher nicht verwendet werden. Seite 10 © |edvgraz| JavaScript Grundlagen Erstes JavaScript Beispiel 4 Erstes JavaScript Beispiel Wir starten mit einem klassischen Beispiel. Wir schreiben ein Programm, das im Webbrowser den Text HALLO WELT ausgibt. Übung - Hallo Welt (Bsp001) 1. Öffnen Sie im Editor Visual Studio Code die Datei bsp001.html. 2. Erstellen Sie oberhalb des Body-Schließen-Tags einen Script-Tag. 3. Schreiben Sie folgenden JavaScript-Code innerhalb des Script Tags. 4. Öffnen Sie die Datei bsp001.html im Browser Chrome. Sie sollten folgende Meldung erhalten. 5. Wechseln Sie wieder in den Editor Visual Studio Code und löschen Sie die Script-Tags inklusive Inhalt. 6. Erstellen Sie im Editor einen neuen Ordner, indem Sie auf das Ordner Symbol klicken. Benennen Sie den Ordner SCRIPT. 7. Erstellen Sie im Ordner Script eine neue Datei, indem Sie auf das Datei Symbol klicken. Benennen Sie die Datei bsp001.js. 8. Öffnen Sie die Datei bsp001.js und schreiben Sie folgenden JavaScript Code ab: © |edvgraz| Seite 11 Erstes JavaScript Beispiel JavaScript Grundlagen 9. Wechseln Sie in die Datei bsp001.html und fügen Sie vor dem Body-Schließen-Tag folgenden Code ein: 10. Testen Sie die bsp001.html wieder im Webbrowser Chrome. --------------- Ende der Übung --------------- In JavaScript werden fast alle Anweisungen mit einem Semikolon ; beendet. Falls Sie das Semikolon einmal vergessen, ist das generell nicht so schlimm, da die JavaScript Engine automatisch die fehlenden Semikolons einfügt. Sie sollten aber trotzdem darauf achten ihre Anweisungen damit zu beenden, um sauberen Code zu schreiben. Seite 12 © |edvgraz| JavaScript Grundlagen Die Konsole 5 Die Konsole Manchmal ist es nötig, eine bestimmte Ausgabe zu testen bzw. nur für Sie als Entwickler*in auszugeben, um zum Beispiel ein Zwischenergebnis zu erhalten. Für diesen Zweck gibt es im Webbrowser die Entwicklertools (F12). Am Mac command + alt + i. In diesem Skript werden Sie mit Googles Chrome Browser arbeiten in der Praxis sollten Sie Ihre JavaScript Anwendungen jedoch mit so vielen Browsern wie möglich testen. Die Entwicklertools öffnen Sie bei allen gängigen Browsern (Firefox, Edge und Chrome) mit der Taste F12. Im oberen Menü müssen Sie danach noch auf den Eintrag Console bzw. Konsole klicken. In diesem Skript werden Sie die Konsole vor allem zum Testen von Ausgaben verwenden. Sie können in der Konsole auch Eingaben testen, wie zum Beispiel unser Hallo Welt Programm. Um direkt in der Konsole eine Ausgabe zu erhalten müssen Sie die Methode log() anwenden. Mit der Methode clear() können Sie den Inhalt der Konsole wieder löschen. Eingaben in die Konsole sind grundsätzlich temporär und werden nirgends zwischengespeichert. Sie dient vor allem zum Testen von Ausgaben bzw. Zwischenergebnissen. © |edvgraz| Seite 13 Die Konsole JavaScript Grundlagen Übung - Konsole 1. Öffnen Sie den Browser Chrome und mit der Taste F12 dessen Entwicklertools. 2. Wechseln Sie oben in den Reiter Console. 3. Tippen Sie folgenden Code in die Konsole und betätigen Sie anschließend die Enter-Taste. 4. Klicken Sie bei der alert() Meldung auf Ok und tippen Sie folgenden Code in die Konsole. 5. Tippen Sie nun console.clear(); in die Konsole um alles zu löschen. --------------- Ende der Übung --------------- Seite 14 © |edvgraz| JavaScript Grundlagen Berechnungen mit JavaScript 6 Variablen Beim Entwickeln von Programmen stehen Ihnen meistens nicht alle Informationen zur Verfügung. Oft warten Sie noch auf eine Eingabe der Benutzer*innen. Diese Informationen müssen zwischengespeichert werden. Dazu werden sogenannte Variablen verwendet. Sie können eingegebene Informationen, wie zum Beispiel den Vornamen, in eine Variable speichern. Das wird Zuweisen genannt. Um den gespeicherten Namen später wieder zu finden, geben Sie Ihren Variablen ausdrucksstarke Namen. Grundsätzlich können Sie Variablen benennen wie Sie möchten, um Ihren Code aber auch für andere Entwickler*innen lesbarer zu machen, sollte der Name der Variable etwas über den Inhalt aussagen. Eine Variable in der zum Beispiel der Vorname einer Person gespeichert wird, könnten Sie mit vorname benennen. In JavaScript erstellen Sie mit dem Schlüsselwort let eine Variable. Diese Variable hat noch keinen Inhalt und wird von JavaScript als undefined deklariert, was so viel wie nicht definiert bedeutet. Um einer Variable auch einen Inhalt zuzuweisen, müssen Sie mit dem Ist-gleich (=) den gespeicherten Inhalt definieren. Geben Sie anschließend die Variable aus, wird dessen Inhalt ausgegeben. Sie können Variablen mehrmals verwenden, es wird jedoch der alte Inhalt immer vom neuen Inhalt überschrieben. Würden Sie der Variable vorname vom oberen Beispiel einen weiteren Namen zuweisen, wird der neue Name gespeichert und ausgegeben. © |edvgraz| Seite 15 Variablen JavaScript Grundlagen Übung - Variable definieren und ausgeben 1. Öffnen Sie im Chrome Browser die Entwicklertools (F12) und aktivieren Sie die Konsole. 2. Definieren Sie in der Konsole die Variable vorname und weisen Sie der Variable Ihren Vornamen zu. 3. Definieren Sie eine weitere Variable nachname und weisen Sie dieser Ihren Nachnamen zu. 4. Geben Sie danach beide Variablen mit der alert() Methode aus. --------------- Ende der Übung --------------- In der oberen Übung haben Sie eine typische Zeichenkette erzeugt. Sie können Variablen und eigenen Text mit einem Pluszeichen (+) aneinanderketten. Zwischen den beiden Variablen wurde ein Leerschritt eingefügt. Dazu später noch mehr. 6.1 Namensregeln Wie oben erwähnt können Sie grundsätzlich Ihre Variablen benennen wie Sie möchten. Es gibt dabei aber trotzdem einige Regeln zu beachten.  Keine Ziffern am Beginn der Variable.  Sie dürfen keine Sonderzeichen wie Umlaute ä, ö, ü, Ä, Ö, Ü, kein ß sowie Leerzeichen verwenden.  Als Variablen-Name dürfen keine JavaScript Schlüsselwörter, wie zum Beispiel let verwendet werden. Neben diesen Regeln gibt es noch Konventionen, an die Sie sich halten sollten:  Der Name einer Variable sollte etwas über den Inhalt aussagen.  Wenn Ihre Variable aus mehreren Wörtern besteht, verwenden Sie die sogenannte camelCase- Schreibweise. Der Name beginnt mit einem kleinen Buchstaben und jedes weitere Wort beginnt mit einem Großbuchstaben, zum Beispiel numberYear. Seite 16 © |edvgraz| JavaScript Grundlagen Berechnungen mit JavaScript Übung - Adressblock in Variablen speichern und ausgeben Erstellen Sie in der Chrome Konsole drei Variablen für den Namen, Straße und PLZ inkl. Ort und weisen Sie diesen Ihre eigenen Daten zu. Geben Sie die Variablen mit der alert() Methode aus. Tipp: Sie können mit “\n“ einen Zeilenumbruch erzeugen. --------------- Ende der Übung --------------- 6.2 Eingabe- und Ausgabe von Zeichenketten Bisher haben Sie die Ausgabe mit alert() und console.log() kennengelernt. Wie oben schon erwähnt müssen Sie manchmal Eingaben von Benutzer*innen entgegennehmen. Dazu gibt es die Methode prompt(). Mit dieser Methode können Sie Eingaben in Variablen speichern, verarbeiten und weiterverwenden bzw. ausgeben. Der Methode prompt() wird dabei in der Klammer eine Aufforderung mitgegeben, die über dem Eingabefeld erscheint. © |edvgraz| Seite 17 Variablen JavaScript Grundlagen Übung - Eingabe/Ausgabe (Bsp002) Öffnen Sie die Datei bsp002.html in Visual Studio Code und erstellen Sie ein Script, das die Benutzer*innen auffordert Ihren Vornamen einzugeben. Nach dem Vornamen werden die Benutzer*innen aufgefordert Ihren Nachnamen einzugeben. Geben Sie beide Variablen mit einer Begrüßung wieder aus. --------------- Ende der Übung --------------- 6.3 Datentypen Generell unterscheidet JavaScript zwischen  Primitiven Typen  Referenztypen Bei primitiven Typen werden Daten direkt im Variablenobjekt gespeichert, bei Referenztypen wird ein Zeiger auf ein Objekt im Arbeitsspeicher angelegt. Hier werden wir uns vorerst den primitiven Typen widmen. Bei primitiven Typen wird zwischen 5 Datentypen unterschieden. So wird eine Variable des Typs String immer eine Zeichenkette (oder Text) beinhalten. Ein String ist grundsätzlich eine Variable die Text beinhaltet – eine sogenannte Zeichenkette. Sie können zwar auch Zahlen in einen String String speichern, mit diesen jedoch nicht rechnen. Ein String kann in JavaScript nicht mehr verändert werden. Der Number Typ speichert Zahlen. Hier wird noch zwischen einem Integer und einer Fließkommazahl unterschieden – ein Integer ist eine Number Zahl ohne Dezimalstellen, eine Fließkommazahl hingegen mit Dezimalstellen. Boolean Ein Boolean kann nur zwei Werte annehmen – True und False. Seite 18 © |edvgraz| JavaScript Grundlagen Berechnungen mit JavaScript Null Der Null Typ hat genau einen Wert und zwar null (0) undefined Eine Variable, der noch kein Wert zugewiesen wurde. In JavaScript müssen Sie Datentypen nicht extra Deklarieren wie in anderen Programmiersprachen. Der Datentyp wird automatisch mit dem jeweiligen Inhalt definiert. Mit dem Schlüsselwort typeof() erhalten Sie den Datentyp einer Variable. Übung - Datentypen (Bsp003) 1. Öffnen Sie die Datei bsp003.html und erstellen Sie im Bodybereich einen Script-Tag. 2. Erstellen Sie folgende fünf Variablen: 3. Geben Sie anschließend die Variablen wie folgt in Ihrem HTML-Dokument aus: 4. Öffnen Sie die Datei bsp003.html in einem Webbrowser. --------------- Ende der Übung --------------- In der Übung oben sehen Sie sehr gut, dass alles unter Anführungszeichen automatisch als String definiert wird. Das heißt die Variable txtString2 hat zwar den Inhalt 50, dieser wird jedoch als Text interpretiert. Mit dieser Variable können Sie nicht rechnen. Es gibt jedoch Methoden, um einen String in eine Number zu konvertieren. Dazu später mehr. © |edvgraz| Seite 19 Variablen JavaScript Grundlagen 6.4 Konstanten Konstanten sind ähnlich wie Variablen zur Speicherung von Werten. Der einzige Unterschied ist, dass sie sich im Nachhinein nicht mehr verändern lassen. Konstanten werden für fixe Werte zum Beispiel Funktionen genutzt. Sie werden mit dem Schlüsselwort const erstellt. 6.5 Variablen speicher Primitive Datentypen erhalten bei JavaScript unmittelbar einen eigenen primitiven Wert. Das heißt, wenn derselbe Wert zwei Variablen zugewiesen wird, erhält jede Variable erhält ihre eigene Kopie des Wertes. Diese Unterscheidung ist wichtig, um den Unterschied zu den Referenztypen zu verstehen. Im Codebeispiel oben speichern wir einen primiven Wert in die Variable vorname, danach wird dieser Wert in die Variable name2 gespeichert. Wichtig hier ist, dass die beiden Variabeln (vorname, name) völlig voneinander getrennt existieren. Ändern Sie zum Beispiel in weiterer Folge den Inhalt der Variable vorname, so hat das keine Auswirkungen auf die Variable name2. Jede Variable hat ihren eigenen Speicherort und damit ihren eigenen Wert. 6.6 Das Schlüsselwort var Wenn Sie fremden JavaScript Code sehen, werden Sie früher oder später das Schlüsselwort var entdecken. Sie können auch mit dem Schlüsselwort var (anstelle von let) eine Variable deklarieren. Die Unterschiede zwischen let und var liegen im Gültigkeitsbereich der Deklaration (Scope). Das Schlüsselwort let wurde eingeführt um den Gültigkeitsbereich für Variablen weniger fehleranfällig zu gestalten. Verwenden Sie für Ihre neuen JavaScript Projekte immer die Schlüsselwörter let oder const zum Erstellen von Variablen. Zum Thema Gültigkeitsbereich werden Sie später noch mehr erfahren. Seite 20 © |edvgraz| JavaScript Grundlagen Berechnungen mit JavaScript 7 Berechnungen mit JavaScript Wie mit jeder Programmiersprache müssen Sie auch mit JavaScript öfters Berechnungen durchführen. Dabei stehen Ihnen eine Vielzahl an Operatoren zur Verfügung. 7.1 Rechenoperatoren Rechenart Operator Beschreibung Addition + Addiert Zahlen Subtraktion - Subtrahiert Zahlen Multiplikation * Multipliziert Zahlen Division / Dividiert Zahlen Modulo % Gibt den Rest einer Division zurück Inkrement ++ Erhöht eine Zahl um 1 Dekrement -- Verkleinert eine Zahl um 1 Potenzrechnung ** Potenziert eine Zahl Beim Rechnen mit JavaScript können sie grundsätzlich auf die Gesetze der Mathematik zählen. Auch hier gilt Punkt- vor Strichrechnung. Falls Sie diese Reihenfolge ändern möchten, müssen Sie Klammern setzen. Übung - Rechenoperatoren (Bsp004) 1. Öffnen Sie die Datei bsp004.html und fügen Sie im Bodybereich einen Script-Tag ein. 2. Deklarieren Sie folgende Variablen: © |edvgraz| Seite 21 Berechnungen mit JavaScript JavaScript Grundlagen 3. Führen Sie mit den Variablen folgende Berechnungen durch und geben Sie das Ergebnis im Browser aus (document.write). 4. Öffnen Sie die Datei im Chrome Browser. --------------- Ende der Übung --------------- 7.2 Zuweisungsoperatoren Manchmal müssen Sie beim Programmieren den Wert einer Variable selbst als Operand verwenden und gleichzeitig das Ergebnis der Berechnung wieder zuweisen. ERGEBNIS = ERGEBNIS + 5 Nehmen wir an in der Variable ERGEBNIS ist der Wert 10 gespeichert. Im oberen Beispiel lautet die Rechnung dann 10 + 5 und das Ergebnis 15 wird wiederum in die Variable Ergebnis gespeichert. Seite 22 © |edvgraz| JavaScript Grundlagen Berechnungen mit JavaScript Für diese Form der Zuweisung gibt es in JavaScript eine verkürzte Form. Anstatt die Variable erneut auf die rechte Seite zu schreiben, können sie mittels Zuweisungsoperatoren dasselbe erreichen. Diese Methode können Sie nicht nur zum Addieren verwenden. Hier eine Liste der wichtigsten Zuweisungsoperatoren. Operator Rechenart Beispiel Langform += Addieren ergebnis += 11 ergebnis = ergebnis + 11 -= Subtrahieren ergebnis -= 11 ergebnis = ergebnis – 11 *= Multiplizieren ergebnis *= 11 ergebnis = ergebnis * 11 /= Dividieren ergebnis /= 11 ergebnis = ergebnis / 11 %= Modulo ergebnis %= 11 ergebnis = ergebnis % 11 Übung – Zuweisungsoperatoren (Bsp005) 1. Öffnen Sie die Datei bsp005.html in Visual Studio Code. 2. Ergänzen Sie das Script unter den Variablen mit folgendem Code: © |edvgraz| Seite 23 Berechnungen mit JavaScript JavaScript Grundlagen 3. Öffnen sie die Datei im Webbrowser und kontrollieren Sie die jeweiligen Ergebnisse. Bei Ihnen stehen nur die Ergebnisse. --------------- Ende der Übung --------------- 7.3 Plus-Operator mit Zeichenketten (String) Die oben genannten Rechenoperatoren funktionieren wie oben beschrieben, solange Sie Variablen vom Datentyp NUMBER verwenden. Bei einem String verwenden Sie das + (Plus) um mehrere Zeichen aneinanderzuketten. Die text Variable speichert verschiedenen Textbausteine. In diesem Beispiel verbinden wir selbstgeschriebenen Text mit zwei Textvariablen (Strings) und verwenden den Plusoperator zum Verbinden. Die Ausgabe sieht dann so aus: Achten Sie darauf, dass auch die Zahl 34 im Beispiel als String gespeichert wurde. Wenn Sie mit zwei Strings, die Zahlen enthalten, eine Addition durchführen, werden diese immer aneinandergereiht, aber nicht addiert. Seite 24 © |edvgraz| JavaScript Grundlagen Berechnungen mit JavaScript Der Plus-Operator rechnet also nur mit Datentyp Number, bei Strings werden alle Inhalte hintereinandergestellt. 7.4 parseInt() und parseFloat() Sie wissen jetzt, dass Sie mit Strings nicht wie gewöhnlich rechnen können. Dies wird zum Problem, sobald Sie Benutzer*innen-Eingaben verarbeiten möchten. Viele Eingaben, zum Beispiel aus Formularfeldern oder der prompt() Methode liefern einen String zurück - auch wenn Zahlen eingegeben werden. Um mit den Eingaben Berechnungen durchführen zu können, müssen Sie diese erst in einen Number Datentyp umwandeln. Dazu stehen Ihnen folgende zwei Funktionen zur Verfügung: parseInt() Wandelt eine Zeichenkette in eine ganze Zahl um. parseFloat() Wandelt eine Zeichenkette in eine Fließkommazahl um. Im oberen Beispiel wurde die String Variable text mit parseInt() umgewandelt in einen Integer und das Ergebnis der Funktion in der Variable zahl1 gespeichert. Wenn Sie anstelle der Funktion parseInt(), parseFloat() verwenden, werden die Dezimalstellen mitgespeichert. In der Ausgabe sehen Sie sehr schön, dass das Komma als Punkt dargestellt wird. Achten Sie beim Programmieren darauf Kommas immer als Punkt zu schreiben. © |edvgraz| Seite 25 Berechnungen mit JavaScript JavaScript Grundlagen Übung - Eingabe – Verarbeitung – Ausgabe (Bsp006) Rechtwinkliges Dreieck berechnen: Wenn Sie zwei Seiten eines rechtwinkligen Dreiecks wissen, kann die dritte Seite mit der Formel berechnet werden. Im Folgenden Beispiel werden die Längen der Seiten a und b über prompt() eingegeben und die Seite c berechnet, sowie im HTML-Dokument ausgegeben. 1. Öffnen Sie die Datei bsp006.html. 2. Erstellen Sie folgende Variablen und definieren Sie mit prompt() eine Aufforderung zur Eingabe der beiden Dreieckseiten. 3. Wandeln Sie die beiden Variablen seiteA und seiteB mit parseFloat() um in eine Fließkommazahl. 4. Berechnen Sie die Seite C mit folgender Formel. Mit der Funktion Math.sqrt können Sie die Quadratwurzel einer Zahl berechnen. JavaScript bietet Ihnen eine Vielzahl an mathematischen Funktionen über das Math Objekt an. 5. Geben Sie das Ergebnis in Ihrem HTML Dokument als String aus. 6. Öffnen Sie das Dokument in einem Webbrowser. 7. Da manche Ergebnisse eine sehr hohe Anzahl an Dezimalstellen ausgeben, wandeln wir im Nachhinein noch die Variable seiteC um in eine Integer-Zahl. 8. Kontrollieren Sie das Ergebnis im Browser. --------------- Ende der Übung --------------- Seite 26 © |edvgraz| JavaScript Grundlagen Berechnungen mit JavaScript 7.5 Übungen – Berechnungen Übung A1 – Kreisfläche berechnen Schreiben Sie ein JavaScript Programm, in dem Sie die Konstante Pi definieren. Die Benutzer*innen geben den Radius des Kreises ein und danach wird die Kreisfläche in der Chrome Konsole ausgegeben. Die Formel dazu lautet: ∗ --------------- Ende der Übung --------------- Übung A2 - BMI Rechner Schreiben Sie ein JavaScript Programm, indem die Benutzer*innen Ihr Körpergewicht in kg und die Körpergröße in m eingeben. Geben Sie den Body Mass Index im HTML-Dokument aus. Die Formel ö zum Berechnen des BMI lautet: ö öß --------------- Ende der Übung --------------- Übung A3 – Temperaturumwandler Schreiben Sie ein JavaScript Programm, das die Temperatur in Celsius (°C) verarbeitet und im ! HTML-Dokument als Fahreinheit (F) ausgibt. Die Formel zum Umrechnen lautet: ° ∗ "# $ --------------- Ende der Übung --------------- © |edvgraz| Seite 27 Verzweigungen JavaScript Grundlagen 8 Verzweigungen 8.1 Wahrheitswerte (Boolesche Werte) Eine Variable mit dem Datentyp Boolean kann nur zwei Werte annehmen - Wahr (True) und Falsch (False). Wahrheitswerte werden oft als Ergebnis eines Vergleichs ausgewertet. Sie können zum Beispiel herausfinden, ob eine Zahl größer oder kleiner als eine andere Zahl ist. Operator Bedeutung Vergleich Ergebnis < kleiner 2 größer 2>5 false = 4 false == gleich 4 == 4 true === typengleich “4“ === 4 false != ungleich 2 != 3 true Seite 28 © |edvgraz| JavaScript Grundlagen Verzweigungen Achten Sie bei diesen Operatoren auf die richtige Verwendung. Vergessen Sie nicht, dass ein einfaches = (Ist-gleich) einer Variable etwas zuweist, zum Beispiel x = 5 weist der Variable x den Wert 5 zu, wohingegen ein doppeltes Ist-gleich (==) einen Vergleich durchführt. Sie können zum Beispiel kontrollieren, ob in der Variable x der Wert 5 steht. 8.2 Der Vergleichsoperator Ist-gleich Neben dem doppelten Ist-gleich-Zeichen (==), das einen Vergleich durchführt, gibt es noch ein dreifaches Ist-gleich-Zeichen (===). Der Unterschied zum doppelten Ist-gleich-Zeichen liegt hier im Detail. == === Schließt den Datentyp in den Vergleich nicht Kontrolliert auch den Datentyp des ein. Vergleichswertes. Das dreifache Ist-gleich-Zeichen ist also genauer und strenger. Möchten Sie sichergehen, dass bei einem Vergleich auch der Datentyp miteinbezogen wird, müssen Sie das dreifache Zeichen verwenden. Der Vergleich ergibt true, wenn beide Werte denselben Datentyp (z. B. Number) und Wert aufweisen können. 8.3 Einfache Verzweigung – If-Block Mit einem If-Block können Sie nach einem Wahrheitstest eine Ausgabe oder Verarbeitung durchführen. © |edvgraz| Seite 29 Verzweigungen JavaScript Grundlagen 8.4 If-Else-Anweisung Erst mit einem If-Else-Block sind Sie flexibel genug, um Eingaben zu testen und je nach Ausgang des Wahrheitstests andere Verarbeitungen durchzuführen. Im oberen Beispiel wird überprüft ob x größer ist als y und je nach Ausgang des Wahrheitstests eine andere Meldung ausgegeben. Seite 30 © |edvgraz| JavaScript Grundlagen Verzweigungen Übung - If-Else-Verzweigung (Bsp007) 1. Öffnen Sie Datei bsp007.html und erstellen Sie die Variable alter. Weisen Sie der Variable Ihr eigenes Alter zu. 2. Überprüfen Sie mit einer If-Else-Anweisung, ob Sie noch unter den Begriff jugendlich fallen oder schon erwachsen sind. 3. Testen Sie den Code in der Konsole des Browsers. 4. Ändern Sie das Alter auf einen Wert unter 18. 5. Testen Sie den Code in der Konsole des Browsers. --------------- Ende der Übung --------------- 8.5 Else-If Mit einem Else-If können Sie mehrere Bedingungen überprüfen. In manchen Situationen benötigen Sie mehr als zwei Anweisungsblöcke. © |edvgraz| Seite 31 Verzweigungen JavaScript Grundlagen Im oberen Code-Beispiel wird von oben nach unten die Punkteanzahl einer Prüfung kontrolliert. Sobald eine Bedingung wahr ist, wird die entsprechende Meldung ausgegeben. Übung - Else If (Bsp008) 1. Öffnen Sie die Datei bspl008.html in Visual Studio Code. 2. Erstellen Sie eine Variable alter mit folgender Aufforderung: 3. Erstellen Sie folgenden Else-If Block: 4. Testen Sie das Programm in der Konsole des Browsers. --------------- Ende der Übung --------------- Seite 32 © |edvgraz| JavaScript Grundlagen Verzweigungen 8.6 Mehrere Bedingungen Verknüpfen Grundsätzlich können Sie mehrere Bedingungen logisch miteinander verknüpfen. Dazu können Sie folgende Operanden verwenden: Operator Bedeutung && Logisches UND || Logisches ODER ! Negation Beim logischen UND müssen beide Bedingungen wahr sein bzw. true ergeben. Sie können mit dem logischen UND zum Beispiel einen Zahlenraum ausmachen. Die beiden Bedingungen oben ergeben true, wenn die Zahl größer als 10 UND kleiner als 20 ist. Die Zahl muss also zwischen 10 und 20 liegen, damit die Bedingungen true sind. Beim logischen ODER genügt es, wenn eine der beiden Bedingungen true ist. Wenn die Zahl kleiner als 10 ist, ergibt die erste Bedingung true und wenn die Zahl größer als 20 ist, ergibt die zweite Bedingung wiederum true. Durch das ODER genügt es, wenn eine der beiden Bedingungen erfüllt ist – also true ist. Die Zahl dürfte somit nicht zwischen 10 und 20 liegen. © |edvgraz| Seite 33 Verzweigungen JavaScript Grundlagen Mit der Negation können Sie Behauptungen negieren bzw. genau das gegenteilige Ergebnis erzielen. ! = NICHT Das Rufzeichen vor den beiden Bedingungen kehrt den Ausgang/Wahrheitswert der Bedingung um. Das obere Beispiel behauptet, die Zahl ist NICHT kleiner als 10 ODER die Zahl ist NICHT größer als 20. Die Bedingung ist wahr, wenn die Zahl zwischen 10 und 20 liegt. Übung - Bedingungen verknüpfen (Bsp009) 1. Öffnen Sie die Datei bsp009.html und definieren Sie folgende Variable. 2. Geben Sie folgende Verzweigung ein: 3. Testen Sie den Ablauf in einem Browser. --------------- Ende der Übung --------------- Seite 34 © |edvgraz| JavaScript Grundlagen Verzweigungen 8.7 Zufallszahl und Eingabe von Zahlen prüfen Im folgenden Abschnitt lernen Sie Methoden zur Überprüfung von Eingaben kennen. Außerdem werden Sie eine Zufallszahl generieren. Zufallszahlen werden beim Programmieren immer wieder benötigt, um verschiedenen Abläufe abzudecken. Denken Sie zum Beispiel an einen Lottozahlengenerator, oder Sie möchten einem HTML-Element eine zufällige Farbe zuweisen.  Die Methode Math.random() erzeugt eine zufällige Zahl zwischen 0 und 1 (z. B. 0,5685).  Die Funktion isNAN() überprüft ob eine Variable keine gültige Zahl enthält. Übung - Eingaben prüfen (Bsp010) 1. Öffnen Sie die Datei bsp010.html und erstellen Sie folgende Variablen. Die Zufallszahl mal 10 gerechnet ergibt eine Zufallszahl zwischen 0 und 10. 2. Schreiben Sie folgenden Beispielcode: 3. Öffnen Sie die Datei in einem Browser und testen Sie alle Situationen durch. Tipp: Zum Testen der richtigen Zufallszahl, lassen Sie sich die Variable Zufall in der Konsole vor der Eingabe der Zahl anzeigen. --------------- Ende der Übung --------------- In der oberen Übung müssen Sie manche Eingaben mit dem Datentyp String überprüfen. Den Vergleich eingabe == ““ (Eingabe = leer) können Sie zum Beispiel nur mit einer Variable vom Datentyp String durchführen. Deshalb wird die eingegebene Zahl in eine eigene Variable (zahl) gespeichert. © |edvgraz| Seite 35 Verzweigungen JavaScript Grundlagen 8.8 Boolean in einer If-Verzweigung Wenn Sie eine If-Verzweigung mit einem Datentyp Boolean durchführen, benötigen Sie keinen Vergleichswert. Die Bedingung gilt als wahr, wenn der Boolean auf true gesetzt ist. Im oberen Beispielcode sehen Sie, wenn der Boolean auf true gesetzt ist, gilt die Bedingung automatisch als erfüllt. Ändern Sie den Status des Boolean, gilt die Bedingung nicht mehr als erfüllt. Übung B1 – Zahlenvergleich Schreiben Sie ein JavaScript Programm, das zwei eingegebene Zahlen vergleicht. Wenn die beiden Zahlen gleich groß sind, geben Sie „beide gleich“ aus. Ansonsten soll immer die größere der beiden Zahlen mit dem Text „ist größer als“ und der kleineren Zahl ausgegeben werden. --------------- Ende der Übung --------------- Übung B2 – Ausgehzeiten In der Steiermark gelten folgende Ausgehzeiten: unter 14 Jahren von 5 bis 23 Uhr, zwischen 14 und 16 Jahren von 5 bis 1 Uhr und ab 16 Jahren unbegrenzt. Schreiben Sie ein JavaScript Programm, in dem das Alter eingegeben wird und die passenden Ausgehzeiten mit document.write() ausgegeben werden. --------------- Ende der Übung --------------- Seite 36 © |edvgraz| JavaScript Grundlagen Verzweigungen Übung B3 – Flächenberechnung Schreiben Sie ein JavaScript Programm um die Fläche eines Kreises, eines Rechteckes, und eines Dreiecks zu berechnen. Dabei sollte der*die User*in zuerst gefragt werden von welcher Form die Fläche berechnet werden soll. Danach soll er*sie die benötigten Zahlen für Berechnung eingeben können. Anschließend wird die Berechnung durchgeführt und die Lösung ausgegeben (Um das Beispiel zu vereinfachen, gehen Sie beim Dreieck von einem rechtwinkligen Dreieck aus). Kreis Rechteck/Quadrat Dreieck + % &' ( % )∗* % ( *ℎ --------------- Ende der Übung --------------- 8.9 If Shorthand Schreibweise Sie können in JavaScript eine einfache Wenn-Verzweigung im Code abkürzen. Langform Shorthand Für die Shorthand Schreibweise ersetzen Sie die Schlüsselwörter if und else. Nach der Bedingung, die nicht in Klammern gesetzt werden muss, folgt ein Fragezeichen (?) und anstelle des else Arguments verwenden Sie einfach einen Doppelpunkt (:). Verwende Sie vorerst einfach die Schreibweise, die Ihnen sympathischer ist. Sie sollten aber trotzdem mit der Kurzschreibweise vertraut sein, vor allem wenn Sie fremden Code lesen müssen. © |edvgraz| Seite 37 Schleifen JavaScript Grundlagen 9 Schleifen Schleifen sind wiederholende Codeabschnitte. Manchmal können Sie als Programmierer*in nicht abschätzen, wie oft ein Codeabschnitt wiederholt werden muss, oder die User*innen entscheiden, wann ein Codeabschnitt nicht mehr ausgeführt wird. Außerdem können Sie mit Schleifen viel Programmierarbeit einsparen, da Sie denselben Codeabschnitt nur einmal schreiben müssen und die Schleife wiederholt den Code automatisch. Es gibt mehrere Schleifen. 9.1 Die For-Schleife (Zählschleife) Bei einer For-Schleife wird vorab bestimmt, wie oft der Code innerhalb der Schleife ausgeführt wird. Dazu verwenden Sie eine Zählvariable, diese wird in der Regel mit i benannt. Der Schleife werden drei Argumente mitgegeben:  Startwert  Endwert  Schrittweite In der Klammer nach dem for Argument wird die Zählvariable i definiert und auf 1 gesetzt. Der Code innerhalb der Schleife wird so lange ausgeführt, bis die Zählvariable i den Wert 10 beträgt. Im letzten Argument wird definiert, dass die Zählvariable nach jedem Durchgang immer um 1 (inkrementell) erhöht wird. Der Code innerhalb der Schleife wird deshalb 10-mal ausgeführt, die Zählvariabel i wird 10-mal um eins erhöht. Das Ergebnis im Browser sieht wie folgt aus: Seite 38 © |edvgraz| JavaScript Grundlagen Schleifen Übung – For-Schleife (Bsp011) 1. Öffnen Sie die Datei bsp011.html und erstellen Sie eine For-Schleife, die von 1 bis 10 zählt. 2. Testen Sie die Schleife im Browser. 3. Ändern Sie die For-Schleife so, dass nur jede zweite Zahl von 1 bis 10 ausgegeben wird. 4. Testen Sie die Schleife im Browser. 5. Ändern Sie die For-Schleife so ab, dass nur die geraden Zahlen zwischen 1 und 10 ausgegeben werden. 6. Testen Sie die Schleife in Ihrem Browser. --------------- Ende der Übung --------------- © |edvgraz| Seite 39 Schleifen JavaScript Grundlagen Übung C1 – Gerade Zahlen Geben Sie im Browser alle geraden Zahlen von 1 bis 1.000.000 (eine Million) nebeneinander aus. Verwenden Sie dazu eine Zählschleife. Die Zahlen sind mit einem Leerschritt getrennt. Übung C2 – Multiplizieren Schreiben Sie ein JavaScript Programm, das die Zahl 1 verdoppelt. Das Ergebnis dieser Berechnung soll wiederum verdoppelt werden. Dies soll insgesamt 50-mal durchgeführt werden. Die Zahl 1 verdoppelt ergibt 2, die Zahl 2 verdoppelt ergibt 4 usw. Verwenden Sie dazu eine Zählschleife. --------------- Ende der Übung --------------- 9.2 While-Schleife (Kopfgesteuert) Bei der While-Schleife wird am Beginn der Schleife eine Bedingung geprüft. Ist diese nicht erfüllt, wird die Schleife so oft durchlaufen, bis sie erfüllt (true) ist. Es kann also vorkommen, dass die Schleife kein einziges Mal durchlaufen wird, falls die Bedingung im Vorfeld schon erfüllt wurde. Nachdem die Variable wert definiert wird, startet die Schleife. Die Schleife wird so lange ausgeführt, bis die Zahl in der Variable wert kleiner oder gleich 10 ist. Da wir hier keine For-Schleife verwenden, die im Schleifenkopf die Erhöhung der Zählvariable durchführt, müssen wir dies selbstständig Seite 40 © |edvgraz| JavaScript Grundlagen Schleifen innerhalb der Schleife nachholen. Mit wert++ wird die Variable wert bei jedem Schleifendurchlauf um 1 erhöht. Das Ergebnis der Schleife gibt wiederum die Zahlen 1 bis 10 aus. Übung – While-Schleife (Bsp012) 1. Definieren Sie innerhalb des Script-Tags folgende Variable: 2. Erstellen Sie folgende Schleife: 3. Testen Sie die Schleife in einem Browser. Aktualisieren Sie die Seite mehrmals um unterschiedliche Ergebnisse zu erhalten. --------------- Ende der Übung --------------- In der oberen Übung werden Zufallszahlen zwischen 0 und 5 miteinander summiert. Die Schleife wird durchgelaufen solange die Summe aller bisherigen Zufallszahlen kleiner als 10 beträgt. Mit der Funktion Math.floor() wird die Zufallszahl immer auf eine ganze Zahl abgerundet. Das Ergebnis dieser Schleife ist also immer unterschiedlich je nachdem wie hoch die jeweiligen Zufallszahlen ausfallen. Im obigen möglichen Ergebnis ist die letzte Zahl größer als 10. Wie ist das möglich? Die Abbruchbedingung befindet sich bevor der Code in der Schleife ausgeführt wird. Die vorletzte Summe beträgt 9 und ist somit kleiner als 10. Danach wird der Code in der Schleife noch ein letztes Mal ausgeführt und führt zur Gesamtsumme von 13. © |edvgraz| Seite 41 Schleifen JavaScript Grundlagen 9.3 Do-While-Schleife (Fußgesteuerte Schleife) Die Do-While-Schleife funktioniert ähnlich wie die While-Schleife nur dass hier die Abbruchbedingung am Ende der Schleife steht. Der Code in der Schleife wird deshalb immer mindestens einmal durchlaufen. Das obere Beispiel zählt wieder Zahlen von 1 bis 10. Im Unterschied zur kopfgesteuerten (While- Schleife) steht bei der Do-While-Schleife (fußgesteuert) die Abbruchbedingung am Ende. Der Code innerhalb der Schleife wird mindestens einmal ausgeführt. Übung – Do-While-Schleife (Bsp012) 1. Erstellen Sie unterhalb der While-Schleife eine Variable zahl und weisen Sie ihr den Wert 0 zu. 2. Erstellen Sie darunter folgende Do-While-Schleife: 3. Testen sie das Script in einem Browser. --------------- Ende der Übung --------------- Im oberen Beispiel geben Sie so lange Zahlen ein, bis die Ziffer 0 eingetippt wird. Wenn Sie die 0 eintippen, wird der Text „Sie haben die Eingabe beendet“ ausgegeben und mit dem Argument break die Schleife vorzeitig verlassen. Solange die eingegebenen Zahlen größer als 0 sind, wird der zweite Seite 42 © |edvgraz| JavaScript Grundlagen Schleifen Text im Browser ausgegeben. Die Wenn-Verzweigung verhindert, dass die Zahl 0 am Ende ausgegeben wird. Übung – Zahlenraten (Bsp013) 1. Öffnen Sie die Datei bsp013 in Visual Studio Code und erstellen Sie im Script-Tag folgende Variablen. 2. Schreiben Sie danach folgende Schleife ab: 3. Testen sie die HTML-Datei in einem Webbrowser. --------------- Ende der Übung --------------- Im Beispiel Zahlenraten deklarieren Sie zuerst vier Variablen. Zwei Number Variablen und zwei Strings. In die Variable zufall wird sofort eine Zufallszahl als ganze Zahl (Math.floor) gespeichert. Die Zufallszahl gibt eine Zahl zwischen 0 und 100 wieder. Das plus 1 zum Schluss benötigen Sie, um auch © |edvgraz| Seite 43 Schleifen JavaScript Grundlagen exakt hundert zu erreichen. Würden Sie nur mal hundert rechnen bekommen Sie eine Zufallszahl von 0 bis 99. Die Fußgesteuerte Schleife wird so lange durchlaufen, bis die eingegebene Zahl exakt dem Wert der Zufallszahl entspricht. Solange die Zahl ungleich der Zufallszahl ist, wird der Code in der Schleife wiederholt. Innerhalb der Schleife wird nach der Zahleneingabe die Zahl in einer Verzweigung überprüft. Der Infotext wird nach Durchlaufen der Verzweigung mit alert() ausgegeben und in eine weitere Textvariable (ausgabe) gespeichert. Mit dem Operator += wird bei jedem Durchlauf eine Textzeile hinzugefügt - der ältere Inhalt der Variable jedoch nicht gelöscht. Nach der Schleife wird die Zeichenkette ausgabe im HTML-Dokument mit document.write ausgegeben. Seite 44 © |edvgraz| JavaScript Grundlagen Schleifen Übung C3 – Durch 16 teilbar Schreiben Sie ein JavaScript Programm, welches im Browser alle durch 16 teilbaren Zahlen zwischen einem einzugebenden Start- und Endwert ausgibt. Verwenden Sie dazu eine passende Schleife. --------------- Ende der Übung --------------- Übung C4 – Mittelwert berechnen Schreiben Sie ein JavaScript Programm, welches Sie so lange Zahlen eingeben lässt, bis Sie den Wert 0 eingeben. Berechnen Sie aus den eingegebenen Zahlen den Mittelwert, indem Sie alle Zahlen summieren und anschließend durch die Anzahl der eingegebenen Zahlen dividieren. Geben Sie das Ergebnis in einem Browser aus. Zusatzaufgabe: Recherchieren Sie im Internet, wie Sie die Ergebniszahl nur mit zwei Dezimalstellen darstellen können. --------------- Ende der Übung --------------- © |edvgraz| Seite 45 Arbeiten mit Strings JavaScript Grundlagen 10 Arbeiten mit Strings Beim Programmieren müssen Sie manchmal Zeichenketten (Strings) verarbeiten. Für Zeichenketten bietet JavaScript ein paar nützliche Methoden. Jedem Zeichen innerhalb eines Strings wird eine sogenannte Indexnummer zugewiesen. E r i k a M u s t e r f r a u 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Beachten Sie, dass die Nummerierung bei Null beginnt und der Computer einen Leerschritt innerhalb der Zeichenkette auch als Zeichen definiert. Um die Länge einer Zeichenkette auszulesen, benötigen Sie das Schlüsselwort length. Das Schlüsselwort length gibt an, aus wie vielen Zeichen eine Zeichenkette besteht. Hier kann die Länge im Vergleich zur Indexnummer manchmal verwirrend sein. Weshalb geht die Indexnummerierung nur bis 15 und die Länge des Strings zeigt den Wert 16 an? Beachten Sie nochmals, dass die Indexnummerierung bei 0 (nicht 1) beginnt. Wenn Sie die Zeichenkette von 0 zu zählen beginnen, kommen Sie auf die Zahl 15. Die Methode length zählt hingegen klassisch ab 1 die Anzahl der Zeichen, weshalb diese 16 ergibt. Übung – Zeichenketten mit length (Bsp014) 1. Öffnen Sie die Datei bsp014.html und Schreiben Sie in die Variabel name Ihren eigenen Namen. 2. Geben Sie die Zeichenanzahl der Variable name mit dem Schlüsselwort length in der Konsole aus. 3. Testen Sie die Ausgaben im Browser. Seite 46 © |edvgraz| JavaScript Grundlagen Arbeiten mit Strings 4. Schreiben Sie folgende Schleife. Mit name.length definieren Sie wie oft die Zählschleife ausgeführt werden sollte. Mit der eckigen Klammer können Sie auf die Index Nummer Ihrer Zeichenkette zugreifen. Sie lesen hier also das i-te Zeichen aus, danach lassen Sie sich den Wert in i anzeigen und am Ende fügen Sie einen Zeilenumbruch ein. 5. Testen Sie das Programm im Browser. 6. Ändern Sie den Namen in der Variable auf „Erika Mustermann“ und vergleichen Sie das Ergebnis mit der Tabelle auf Seite 44. --------------- Ende der Übung --------------- 10.1 indexOf() und lastIndexOf() Mit den beiden Methoden indexOf() und lastindexOf() können Sie einzelne Zeichen innerhalb des Strings suchen. Mit indexOf() wird vom Beginn der Zeichenkette nach dem ersten Vorkommen eines angegebenen Zeichens gesucht. Die Methode gibt die Indexnummer des jeweiligen Buchstabens zurück. Mit der Methode lastIndexOf() wird vom Ende der Zeichenkette weg gesucht. © |edvgraz| Seite 47 Arbeiten mit Strings JavaScript Grundlagen Übung – einzelne Zeichen suchen (Bsp014) 1. Öffnen Sie die Datei bsp014.html und ändern sie den Wert der Variable name wieder auf Ihren Namen. Suchen Sie dann unterhalb der Schleife einen beliebigen Buchstaben innerhalb Ihres eigenen Namens und lassen Sie dessen Indexnummer in der Konsole ausgeben. 2. Ändern Sie die Methode indexOf() auf lastIndexOf(). 3. Definieren Sie folgende Variablen und schreiben Sie die nachstehende Schleife ab. 4. Testen Sie das Programm in der Konsole ihres Browsers. --------------- Ende der Übung --------------- Im oberen Beispiel wird die Indexnummer des Leerschritts zwischen Vor- und Nachnamen gesucht. Diese Nummer speichern Sie in die Variable index. Danach geht die Zählschleife bis zum Leerschritt jeden Buchstaben der Variable name durch und speichert die einzelnen Zeichen in die Variable vorname. Seite 48 © |edvgraz| JavaScript Grundlagen Arbeiten mit Strings 10.2 substring() Mit der Substring Methode können Sie Teile aus einer Zeichenkette extrahieren. Dazu schreiben Sie in die Runde Klammer den Startindex und mit Komma getrennt den Endindex. Übung – Methode substring() (Bsp014) Geben Sie in der Konsole Ihres Browsers nur den Nachnamen der Variable name aus. --------------- Ende der Übung --------------- © |edvgraz| Seite 49 Kommentare JavaScript Grundlagen 11 Kommentare Wie in jeder Programmiersprache gibt es auch bei JavaScript eine Möglichkeit zum Kommentieren. Manche Programmierer argumentieren, der perfekte Code kommt gänzlich ohne Kommentare aus, da die Syntax sowie die Benennungen für sich sprechen. Vor allem zu Beginn sollten Sie aber trotzdem Ihren Code mit Kommentaren verständlicher gestalten. Um anderen Entwicklern das Lesen Ihres Codes zu vereinfachen, verwenden Sie kurze Kommentare, die den jeweiligen Codeblock beschreiben bzw. kurz erklären was dieser macht. 11.1 Einzeiliger Kommentar Mit einem Doppel-Slash können Sie die jeweilige Codezeile als Kommentar definieren. 11.2 Mehrzeilige Kommentare Ein mehrzeiliger Kommentar in JavaScript entspricht den Kommentaren in CSS. Mit wird der Kommentar wieder geschlossen. Mehrzeilige Kommentare eignen sich auch zum Code Testen. Sie können Code-Abschnitte, die Sie nicht löschen möchten, auskommentieren. Seite 50 © |edvgraz| JavaScript Grundlagen Arrays 12 Arrays Alle Variablen, die Sie bis jetzt kennengelernt haben, können immer nur einen Inhalt in Form einer Zeichenkette oder einer Zahl speichern. Immer wenn zum Beispiel in einer Schleife bei jedem Durchgang ein Inhalt mit += in eine Variable angefügt wurde, dann war das trotzdem nur eine Zeichenkette. Mit sogenannten Arrays (Felder) können Sie mehr als einen Inhalt speichern. Der Code dazu sieht wie folgt aus: Sie deklarieren ein Array wie eine normale Variable mit dem Unterschied, dass Sie eckige Klammern verwenden. In den eckigen Klammern befinden sich die verschiedenen Inhalte mit Komma getrennt. Das Array im Beispiel oben beinhaltet vier verschiedene Zeichenketten. Wenn Sie das Feld mit console.log() ausgeben, erhalten Sie folgende Ausgabe: Das Feld hat eine Länge von 4, also es beinhaltet vier einzelne Einträge. Neben den Namen sehen Sie die Nummerierung (Index) der einzelnen Einträge. Jeder Eintrag hat eine Nummer beginnend bei Null. Das ist wichtig, wenn Sie auf die einzelnen Einträge zum Beispiel in einer Zählschleife zugreifen. Sie müssen daran denken, dass die Zählvariable in der Schleife nicht bei 1 sondern bei 0 beginnt. In JavaScript können Sie in Arrays auch Inhalte mit verschieden Datentypen speichern. Ein Array mit einem String, einer Number und einem Boolean ist in JavaScript möglich. © |edvgraz| Seite 51 Arrays JavaScript Grundlagen Gleich wie Variablen können Sie auch Felder ohne konkreten Inhalt vorab deklarieren. Damit JavaScript die Variable als Feld definiert müssen Sie zwei eckige Klammern ohne Inhalt definieren. Sie können über den Index später das Feld mit Inhalten füllen. Meistens wird zum Füllen eines Arrays die Methode push() verwendet - dazu später mehr. 12.1 Auf Inhalte des Arrays zugreifen Oben haben Sie schon gesehen, dass jeder Eintrag des Arrays einen Index besitzt. Sie können den jeweiligen Eintrag über die Indexnummer auslesen und in Ihren JavaScript Programmen weiterverwenden. In der eckigen Klammer steht die jeweilige Indexnummer, auf die Sie zugreifen möchten. Sie können Felder hervorragend mit Schleifen auslesen. Wie oben erwähnt, müssen Sie die For-Schleife mit i = 0 beginnen. Das length Argument liest die Länge eines Feldes aus. Da im Feld vier Einträge vorhanden sind wird der Code in der Schleife vier Mal ausgeführt. Die Variable i durchläuft das Feld vom 0-ten bis zum 3-ten Eintrag und gibt somit alle Einträge einzeln aus. Sie können das length Argument auch verwenden, um die Länge einer Zeichenkette zu erhalten. Seite 52 © |edvgraz| JavaScript Grundlagen Arrays Übung – Array deklarieren und ausgeben (Bsp015) 1. Öffnen Sie die Datei bsp015.html in Visual Studio Code und erzeugen Sie innerhalb des Script- Tags folgendes Array. 2. Geben Sie den Eintrag Mineralwasser in der Chrome Konsole aus. 3. Erweitern Sie die Ausgabe durch eine Zählschleife, sodass alle Inhalte des Feldes in der Konsole von Chrome angezeigt werden. --------------- Ende der Übung --------------- 12.2 Array Schleifen mit JavaScript Grundsätzlich können Sie für Arrays jede Art von Schleife verwenden. Es gibt mehrere Schleifen, die speziell für Arrays sehr nützlich sind. Hier beschränken wir uns vorerst auf die sogenannte For…of Schleife. © |edvgraz| Seite 53 Arrays JavaScript Grundlagen For…of Schleife Die For…of Schleife geht mit jedem einzelnen Element durch das Array. Die Schleife gibt keinen Index wieder, sondern den jeweiligen Inhalt des Arrays. Die neu erstellte Variable element erhält bei jedem Schleifendurchgang ein Element des Arrays.  1. Durchgang – element = susanne  2. Durchgang – element = christian  3 Durchgang – element = isa  4. Durchgang – element = ahman Das ist eine sehr praktische Art, um durch ein Array zu gehen oder die Inhalte des Arrays aufzulisten. Es gibt noch weitere Möglichkeiten wie zum Beispiel die forEach() Methode - dazu aber später mehr. 12.3 Methoden zum Arbeiten mit Arrays Wie in anderen Programmiersprachen gibt es auch in JavaScript vordefinierte Methoden zum Arbeiten mit Arrays. Hier eine kleine Auswahl der wichtigsten Methoden. Methode Beschreibung concat() Hängt Elemente an ein bestehendes Array an. Seite 54 © |edvgraz| JavaScript Grundlagen Arrays pop() Entfernt das letzte Element eines Arrays. push() Fügt ein neues Element am Ende des Arrays ein. slice() Schneidet einzelne Elemente aus einem Array heraus. sort() Sortiert das Array. join() Vereint ein Array zu einem einzelnen String. Es gibt noch viele weitere Methoden. Hier sind nur die Allerwichtigsten aufgelistet. Später werden wir noch wichtige Array Methoden wie zum Beispiel map(), filter() oder reduce() lernen. Um diese Methoden leichter zu verstehen, müssen Sie zuerst mit Funktionen umgehen können. 12.4 Die push() Methode Mit der push() Methode können Sie am Ende eines Arrays neue Einträge ergänzen. Sie können mit push() ein oder mehrere Elemente gleichzeitig hinzufügen. Wenn Sie mehr als ein Element anhängen möchten, müssen Sie die einzelnen Einträge mit einem Komma trennen. Das Array beinhaltet anschließend die ursprünglichen Einträge und am Ende alle neuen Einträge. 12.5 Die pop() Methode Die pop() Methode macht das Gegenteil der push() Methode. Sie entfernt ein Element am Ende eines Arrays. Die Methode pop() gibt den jeweiligen Eintrag zurück. © |edvgraz| Seite 55 Arrays JavaScript Grundlagen Hier sollte noch erwähnt werden, dass es auch die Methoden unshift() und shift() gibt die Einträge am Beginn eines Arrays hinzufügen (unshift) oder entfernen (shift). Übung – Einträge hinzufügen und entfernen (Bsp015) 1. Öffnen Sie die Datei bsp015.html und kommentieren Sie den Codebereich unterhalb des Arrays mit einem mehrzeiligen Kommentar aus. 2. Fügen Sie unterhalb des Kommentar mit der push() Methode folgende Einträge dem Array drinks hinzu. 3. Lassen Sie sich das Array in der Chrome Konsole anzeigen. 4. Erstellen Sie eine neue Variable mit dem Namen drink. Entfernen Sie den letzten Eintrag des Feldes (Wasser) und Speichern Sie diesen in die Variable drink. Geben Sie die Variable drink in der Konsole aus. Seite 56 © |edvgraz| JavaScript Grundlagen Arrays --------------- Ende der Übung --------------- 12.6 Die slice() Methode Die slice() Methode gibt ein Element des Arrays als neues Array zurück. Damit die slice() Methode funktioniert, müssen Sie noch ein Start- und End-Argument in der Klammer definieren. Im Beispielcode oben werden die ersten drei Arrayeinträge in ein neues Array favDrinks gespeichert. Wenn Sie dem Start- und End-Argument ein Minus voransetzen, wird das Array vom Ende weg durchgezählt. Die slice() Methode gibt eine Kopie der Einträge zurück. Die Einträge im ursprünglichen Array bleiben also erhalten. 12.7 Die sort() und reverse() Methoden Mit der reverse() Methode können Sie den Inhalt eines Feldes reversieren - also umkehren. Die obere Zeile zeigt das ausgegebene Feld drinks, bevor die Methode reverse() ausgeführt wurde. Die darunterliegende Zeile zeigt das Ergebnis, nachdem die Methode reverse() ausgeführt wurde. © |edvgraz| Seite 57 Arrays JavaScript Grundlagen Mit der Methode sort() können Sie Felder alphabethisch sortieren. Die sort() Methode funktioniert bei Zeichenketten sehr gut, muss jedoch für Zahlen angepasst werden. 12.8 Die concat() Methode Mit concat() können Sie zwei oder mehrere Arrays zu einem verbinden. Ähnlich wie slice() ändert die concat() Methode nichts am ursprünglichen Array. Sie gibt lediglich ein neues Array zurück. Die beiden Felder drinks und moredrinks werden mit concat() zu einem neuen Feld drinksList kombiniert. In der Ausgabe sehen Sie, dass die Inhalte beider Felder im neuen Feld sind. Übung – Array Methoden (Bsp015) Testen Sie die Methoden slice(), sort() und concat() selbstständig im bsp015.html. Erstellen Sie für die concat() Methode ein neues Array. Erstellen Sie falls nötig auch neue Variablen. --------------- Ende der Übung --------------- Seite 58 © |edvgraz| JavaScript Grundlagen Arrays 12.9 Die join() Methode Mit join() können Sie aus allen Array Elementen einen String erstellen. Wenn Sie der Methode innerhalb der Klammer ein Trennzeichen mitgeben, werden die einzelnen Elemente durch diesen getrennt. Im Beispiel oben ändert die Methode join() das Array zu einem String, in dem alle Einträge mit einem Komma und danach einem Leerschritt getrennt werden. Übung D1 – Arrays Öffnen Sie die Datei arrays.js aus dem Ordner JS_Teil1/Übungsdateien/ÜbungenF. In der Datei befinden sich unten drei Arrays mit den Namen names, professions und numbers. Versuchen Sie mit den im Kapitel Arrays gelernten Methoden folgende Aufgaben zu lösen. Für die Aufgaben werden Sie auch Verzweigungen und Schleifen benötigen. Die Lösung sollte jeweils mit console.log() oder console.table() in der Browserkonsole ausgegeben werden. Öffnen Sie zum Testen des Codes die Datei arrays.html. In dieser Übung sollten Sie keine Daten händisch in ein neues Array eingeben. Verwenden Sie stattdessen die Methode push(), Schleifen sowie andere Array Methoden.  Wie viele Namen befinden sich im Array names?  Wie viele Einträge befinden sich insgesamt in den Arrays names und professions.  Erstellen Sie ein neues Array, das alle Inhalte der beiden Arrays names und professions innerhalb eines Arrays vereint. Verwenden Sie dazu eine Array Methode. © |edvgraz| Seite 59 Arrays JavaScript Grundlagen  Erstellen Sie ein neues Array, das abwechselnd einen Namen und gleich danach den Beruf im Array anzeigt. Tipp: Sie benötigen dazu eventuell eine Schleife.  Sortieren Sie das im oberen Punkt erstellte Array absteigend nach Alphabet.  Erstellen Sie ein neues Array aus dem Array names. Das neue Array sollte die Indexnummern der Leerzeichen zwischen Vor- und Nachnamen beinhalten. Tipp: Sie benötigen die Methode indexOf() dafür.  Erstellen Sie ein Array, das die ersten fünf Eintrage des Arrays names und die letzten fünf Einträge des Arrays professions beinhaltet. Die Reihenfolge der Einträge ist hier egal.  Wandeln Sie mit Hilfe einer Methode das Array names um in einen String. Alle Namen sollten mit einem Komma (,) getrennt werden. Seite 60 © |edvgraz| JavaScript Grundlagen Arrays  Erstellen Sie aus dem Array professions ein neues Array, das die Einträge des Index 15 – 20 sowie Index 25 – 28 beinhaltet.  Finden Sie heraus, welche Indexnummer die Person Jena Gaines im Array names hat.  Im Array numbers befinden sich Zahlen, die jedoch als String gespeichert wurden. Erstellen Sie ein neues Array, in dem alle Inhalte des Arrays numbers in den Datentyp number (Integer) umgewandelt werden.  Erstellen sie eine Variable und summieren Sie alle Zahlen des oben erstellen Arrays darin.  Berechnen Sie auch den Mittelwert aller Zahlen aus dem oben genannten Array. --------------- Ende der Übung --------------- 12.10 Mehrdimensionale Arrays Mehrdimensionale Arrays oder auch Multidimensionale Arrays sind Arrays, die in mindestens einem äußeren Array verschachtelt sind. © |edvgraz| Seite 61 Arrays JavaScript Grundlagen Das obere Array books beinhaltet drei weitere Arrays, die jeweils wiederum 3 Inhalte aufweisen. Somit hat ein mehrdimensionales Array auch mehrere Indexnummern. Einmal für das äußere Array und einmal für das innere Array. Wenn Sie aus dem Array books zum Beispiel die Autorin j.k. rowling auslesen möchten, müssen Sie den Index wie folgt definieren: Nutzen Sie die Tabellenansicht von oben. Dann können Sie mit dem Hauptindex 2 das Array mit dem Harry Potter Buch ansteuern und danach über den Index 1 die Autorin. Seite 62 © |edvgraz| JavaScript Grundlagen Verschachtelte Schleifen 13 Verschachtelte Schleifen Sie können Schleifen ineinander verschachteln. Verschachtelte Schleifen benötigen Sie manchmal, um zum Beispiel Zahlen zu vergleichen oder um gewisse Problemstellungen zu lösen. Dazu wird innerhalb einer Schleife eine weitere Schleife angelegt, die zum Beispiel die Werte der äußeren Schleife mit den Werten der inneren Schleife verarbeitet. Im oberen Beispiel sehen Sie zwei Zählschleifen, die jeweils von 1 bis 10 gehen. Für die innere Schleife benötigen Sie wieder eine Zählvariable, diese wird in der Regel mit j benannt. Sie können aber auch einen eigenen Namen definieren. Nachdem die äußere Schleife gestartet ist (i = 1) wird sofort die innere Schleife gestartet. Der Code innerhalb der inneren Schleife wird nun 10-mal ausgeführt. Das bedeutet die Rechnung i * j lautet im ersten Durchgang der Schleife 1 * 1, 1 * 2, 1 * 3 usw. Danach wird i um eins erhöht (i = 2) und die innere Schleife läuft abermals 10-mal durch (2 * 1, 2 * 2, 2 * 3 usw.). Das Ergebnis der Schleife ist das kleine Ein-mal-eins, da zehn mal zehn Zahlen miteinander multipliziert werden. © |edvgraz| Seite 63 Verschachtelte Schleifen JavaScript Grundlagen Übung – Zahlen vergleichen (Bsp016) 1. Öffnen Sie die Datei bsp016.html und definieren Sie folgende Felder und Variablen. Achten Sie darauf, dass manche Zahlen in beiden Felder vorkommen. 2. Schreiben Sie folgende verschachtelte Schleife ab: 3. Testen Sie das JavaScript Programm in einem Browser. --------------- Ende der Übung --------------- Die verschachtelte Schleife im oberen Beispiel vergleicht Zahlen aus zwei verschiedenen Feldern. Dabei greifen Sie mit den Zählvariablen i und j auf die einzelnen Indexeinträge der beiden Felder zu. Zuerst wird der erste Eintrag (20) vom Feld zahlen1 mit allen Inhalten des Feldes zahlen2 verglichen. Im zweiten Durchlauf der äußeren Schleife wird der zweite Eintrag (2) des Feldes zahlen1 wiederum mit allen Inhalten von zahlen2 verglichen. usw. Übung E1 – Doppelte Zahlen Erstellen Sie eine verschachtelte Schleife, die aus einem Feld mit min. 10 Zahlen alle doppelten Einträge findet. Sie benötigen für diese Übung nur ein Array, das Sie mit beliebigen Zahlen füllen können. Achten Sie darauf, dass manche Zahlen doppelt vorkommen. --------------- Ende der Übung --------------- Seite 64 © |edvgraz| JavaScript Grundlagen Verschachtelte Schleifen Übung E2 – Lottozahlen Generator Erstellen Sie ein JavaScript Programm, das Lottozahlen generiert. Erzeugen Sie dazu ein leeres Array und befüllen Sie es mit 7 zufälligen Zahlen zwischen 1 und 45. Falls eine Zahl doppelt im Array vorkommt, generieren Sie für diese Zahl eine neue Zufallszahl zwischen 1 und 45. Geben Sie zum Schluss die Zahlen im Browser aus. Sie benötigen eine verschachtelte Schleife. --------------- Ende der Übung --------------- © |edvgraz| Seite 65 Funktionen JavaScript Grundlagen 14 Funktionen Funktionen sind eines der wichtigsten Konzepte in JavaScript. Schauen Sie sich daher das folgende Kapitel besonders genau an. 14.1 Erstellen einer Funktion unter Verwendung einer Funktionsdeklaration Funktionen sind wiederkehrende Codeblöcke, die Sie beliebig oft verwenden können. Je aufwändiger Ihre Programme werden desto schwieriger werden sie zu verwalten. Mit Funktionen können Sie Codeblöcke definieren, die Sie wiederholt verwenden können. In JavaScript verwenden Sie dazu das Schlüsselwort function. Funktionen können an anderen Stellen Ihres Programmes aufgerufen und ausgeführt werden. Mit Funktionen können Sie Ihre Programme auch logisch strukturieren. Nach dem Schlüsselwort function vergeben Sie einen Namen für die jeweilige Funktion. Ähnlich wie bei Variablen sollte dieser den ausführbaren Code beschreiben. Die Funktion eineNachricht() führt ein einfaches alert() mit einer Textausgabe aus. Wenn Sie jetzt Ihr JavaScript im Browser ausführen, wird noch nichts passieren. Sie müssen die Funktion im Code erst ausführen. Mit dem Funktionsnamen wird die Funktion an einer anderen Stelle im Code aufgerufen und der Code innerhalb der Funktion ausgeführt. 14.2 Erstellen einer Funktion unter Verwendung eines Funktionsausdrucks Sie können Funktionen auch einer Variable zuweisen. Bei dieser Schreibweise hat die Funktion selbst meistens keinen Namen. Deshalb werden solche Funktionen auch anonyme Funktionen genannt. Die Variable eineNachricht ist dabei nicht die Funktion selbst. Die Funktion hat im oberen Beispiel keinen Namen, sie wird jedoch in der Variable eineNachricht gespeichert. Seite 66 © |edvgraz| JavaScript Grundlagen Funktionen Eine wichtige Eigenschaft müssen Sie bei dieser Schreibweise jedoch beachten: Der Funktionsaufruf muss unterhalb der Funktion erfolgen. Wenn Sie den Funktionsaufruf oberhalb der Funktion erstellen, wird JavaScript eine Fehlermeldung ausgeben. Bei der Methode mit Funktionsdeklaration können Sie den Funktionsaufruf auch oberhalb der Funktion schreiben. Übung – Addieren (Bsp017) 1. Öffnen Sie die Datei bsp017.html und erstellen Sie innerhalb der Script Tags folgende Funktion. 2. Erstellen Sie unterhalb der Funktion folgenden Funktionsaufruf und testen Sie die Funktion im Browser. 3. Schreiben Sie die Funktion unter Verwendung eines Funktionsausdruckes um. 4. Testen Sie die umgeschriebene Funktion im Browser. --------------- Ende der Übung --------------- 14.3 Übergabeparameter Sie haben vielleicht bemerkt, dass die Funktion addieren im Beispiel oben sehr unflexibel ist. Die Funktion rechnet immer nur mit den Werten 10 und 50. Sie können Funktionen beim Funktionsaufruf auch eigene Werte übergeben. Hier werden der Funktion addieren die Werte 50 und 60 übergeben. Damit die Funktion diese auch verarbeiten kann, müssen Sie Funktionsparameter definieren, in denen die Werte gespeichert werden. © |edvgraz| Seite 67 Funktionen JavaScript Grundlagen Die Parameter schreiben Sie in die runde Klammer nach dem Schlüsselwort function. In diesem Beispiel ist x gleich 50 und y gleich 60. Innerhalb der Funktion können Sie die Parameter wie Variablen verwenden. Jetzt müssen Sie nur beim Funktionsaufruf die Zahlen festlegen und die Funktion selbst muss nicht mehr bearbeitet werden. Sie können einer Funktion alle Arten von Datentypen übergeben. Auch Arrays, Objekte oder Funktionen. Wobei Funktionen in JavaScript quasi eine besondere Art von Objekten sind. Übung – Funktion addieren() modifizieren (Bsp017) Ändern Sie die Funktion addieren() in der Datei bsp017.html so ab, dass sie ein Array von Zahlen entgegennimmt und alle darin enthaltenen Zahlen summiert. Erstellen Sie dazu ein Array das mind. 5 beliebige Zahlen beinhaltet. Die Funktion sollte immer addieren, egal wie viele Zahlen das Array beinhaltet. Geben Sie am Ende die Summe in der Konsole aus. --------------- Ende der Übung --------------- 14.4 Rückgabewert (return) Oft benötigt man das Ergebnis der Funktion nicht als Ausgabe, sondern in einem anderen Bereich des Programmcodes oder sogar in einer weiteren Funktion. Sie können das Resultat einer Funktion zurückgeben, dies wird Rückgabewert genannt und mit dem Schlüsselwort return erzielt. Mit dem Schlüsselwort return wird der Text als Funktionsresultat zurückgegeben. Den Rückgabewert können Sie beim Aufruf in eine Variable speichern oder sofort ausgeben. Seite 68 © |edvgraz| JavaScript Grundlagen Funktionen Übung – Tabelle erstellen (Bsp018) 1. Öffnen Sie die Datei bsp018.html in Ihrem Editor. 2. Erstellen Sie innerhalb des Skript-Tags folgende Funktion: In dieser Funktion werden die Benutzer*innen gefragt, wie viele Zeilen und Spalten die zu erstellende Tabelle haben sollte. Die Anzahl der Zeilen und Spalten wird in die Variablen zeilen und spalten gespeichert und anschließend der Funktion tabelleErstellen() übergeben. Mit tabelleErstellen() wird auch gleichzeitig eine weitere Funktion aufgerufen. 3. Erstellen Sie die Funktion tabelleErstellen() Die äußere Schleife öffnet eine Zeile. Danach wird mit der inneren Schleife die Zeile mit Zellen gefüllt. Die Anzahl der Zellen wird über den Übergabeparameter s festgelegt so wie die Anzahl der Zeilen mit z. 4. Schreiben Sie unterhalb der beiden Funktionen folgenden Funktionsaufruf: 5. Testen Sie das Programm im Webbrowser. --------------- Ende der Übung --------------- © |edvgraz| Seite 69 Funktionen JavaScript Grundlagen 14.5 Arrow Functions (Kurzschreibweise) Seit ein paar Jahren können Sie Funktionen auch platzsparender darstellen. Dabei werden die Parameter mit einem => Zeichen vom Funktionskörper getrennt. (Parameter) => {Funktionskörper} Diese Schreibweise nennt sich Arrow Functions und ist wesentlich platzsparender als die herkömmliche Schreibweise. Dabei ist das => Zeichen von zentraler Bedeutung für die Code Interpretation. Eine Arrow Funktion kommt wie folgt zustande:  Herkömmliche Schreibweise:  Entfernen des Schlüsselwortes function und platzieren eines Arrows nach dem Übergabeparameter.  Entfernen des Schlüsselworts return und der beiden Klammern Paare.  Besitzt die Funktion mehr als 1 Parameter benötigen Sie wieder die Klammern.  Benötigen Sie einen mehrzeiligen Funktionskörper müssen Sie auch die geschwungenen Klammern wieder einführen. Später werden Sie die Arrow Schreibweise noch öfters sehen. Seite 70 © |edvgraz| JavaScript Grundlagen Funktionen Übung F1 – Zufallszahlengenerator Erstellen Sie eine JavaScript Datei (zufallszahlengenerator.js) in der sich eine Funktion befindet, die eine ganzzahlige Zufallszahl zwischen 0 und 1000 zurückgibt. Binden Sie die Datei in eine HTML- Datei ein und rufen Sie die Funktion auf. --------------- Ende der Übung --------------- Übung F2 – Vornamen auslesen Erweitern Sie die in Übung F1 erstellte JavaScript Datei um eine Funktion, die aus den eingegebenen Vor- und Nachnamen nur mehr den Vornamen zurückgibt. Die Benutzer*innen werden aufgefordert den Vor- und Nachnamen einzugeben und die Funktion gibt nur den Vornamen zurück. --------------- Ende der Übung --------------- © |edvgraz| Seite 71 Funktionen JavaScript Grundlagen 14.6 ForEach-Schleife Die ForEach-Schleife ist eine Array Methode, die ähnlich wie die for…of Schleife immer ein Element eines Arrays durchläuft und für das jeweilige Element Code ausführt. Die ForEach-Schleife übergibt dabei eine Funktion, innerhalb der Funktion kann ein beliebiger Code ausgeführt werden. Die Übergabefunktion ist im oberen Beispiel eine Arrow-Funktion. Sie könnte auch wie folgt geschrieben werden: An diesem Beispiel sehen Sie sehr schön die Vorzüge einer Arrow-Funktion. Sie ist wesentlich kürzer und mit ein bisschen Übung auch übersichtlicher. Die ForEach-Schleife sollte an dieser Stelle nur erwähnt werden. Falls Sie die Syntax noch nicht verstehen, keine Sorge, Sie werden später noch mehr über Methoden und Funktionen als Übergabeparameter sowie höhere Funktionen erfahren. Seite 72 © |edvgraz| JavaScript Grundlagen Debugging und Fehler finden 15 Debugging und Fehler finden Sie werden im weiteren Verlauf kleinere Projekte programmieren. Manche Projekte werden nicht einfach sein - das ist zu Beginn normal. Es werden sich viele Fehler, sei es Tippfehler oder Logikfehler einschleichen. Hier finden Sie Tipps, wie Sie Fehler in Ihrem Code besser finden bzw. welche typischen Fehler zu Beginn sehr häufig auftreten. Die folgende Aufzählung sollte als allgemeiner Leitfaden dienen.  Kontrollieren Sie Ihre HTML- und CSS-Dateien auf Fehlermeldungen.  Ist die CSS-Datei mit der HTML-Datei verlinkt?  Ist die JavaScript Datei richtig eingebunden? Testen Sie die Verknüpfung mit console.log(„ein Text“).  Verwenden Sie die Entwicklertools des jeweiligen Browsers.  Kontrollieren Sie mit console.log() den Inhalt einzelner Variablen.  Verwenden Sie Einzelschritt Debugging mit Visual Studio Code und node.js (dazu später mehr). 15.1 Debugging mit Chrome Entwicklertools (F12) Die Browser Entwicklertools beinhalten einen Reiter mit Source oder Quellen. Hier finden Sie auch die für das Projekt verwendeten Dateien. Im Beispiel oben gibt es eine index.html und einen test.js Datei. Mit einem Klick auf die JavaScript Datei können Sie den JavaScript Code sehen. © |edvgraz| Seite 73 Debugging und Fehler finden JavaScript Grundlagen Breakpoint setzen Wenn Sie im Codebereich auf eine Zeilennummer klicken, setzen Sie einen Breakpoint. Dabei wird die JavaScript Anwendung in dieser Codezeile angehalten. Breakpoint Lassen Sie den JavaScript Code ablaufen, indem Sie das Browserfenster aktualisieren. Rechts neben dem Codefenster können Sie den Code in Einzelschritten durchgehen. Dazu stehen Ihnen folgende Schaltflächen zur Verfügung: Mit den beiden Pfeilsymbolen können Sie den Code in Einzelschritte nach vor bzw. nach hinten durchlaufen lassen. Mit jedem Klick wird die nächste Codezeile ausgeführt. Diese Methode eignet sich besonders gut, um Denk- oder Logikfehler im Code zu finden aber auch, um einen Code-Abschnitt besser zu verstehen. Sehen Sie sich Code so oft wie möglich in Einzelschritten an. Seite 74 © |edvgraz| JavaScript Grundlagen Debugging und Fehler finden Im Debugg Bereich unterhalb der Schaltflächen können Sie Variablen und deren Werte beobachten. Mit der Schaltfläche Ausführen wird der gesamte restliche Code durchlaufen, ohne Einzelschritte. Übung F3 – Debugging Öffnen Sie die Übung F1 – Zufallszahlengenerator im Browser und gehen Sie den Code in Einzelschritten durch. Sie benötigen dazu die Entwicklertools. --------------- Ende der Übung --------------- © |edvgraz| Seite 75 Projekt Schere – Stein - Papier JavaScript Grundlagen 16 Projekt Aufgabe – Schere, Stein, Papier In diesem kleinen Projekt programmieren Sie eine JavaScript Anwendung, mit der Sie das Spiel Schere, Stein, Papier gegen einen Computer Gegner spielen können. Sie werden das Spiel als reine Konsolen-Anwendung programmieren, sodass es komplett in der Browserkonsole spielbar sein sollte. Falls Sie das Spiel Schere, Stein, Papier nicht kennen, finden Sie hier eine kurze Erklärung: https://de.wikipedia.org/wiki/Schere,_Stein,_Papier. Hier können Sie das Spiel testen: https://javascript.edvgraz.