|
|
| Zeile 2: |
Zeile 2: |
|
| |
|
| '''Musterlösung''': [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_EcmaScript_Musterloesung Git-Repository] (noch nicht online) | | '''Musterlösung''': [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_EcmaScript_Musterloesung Git-Repository] (noch nicht online) |
|
| |
| ==Vorbereitung== | | ==Vorbereitung== |
|
| |
|
| Im SVN-Repository finden Sie zwei WebStorm-Projekte zum Thema GameLoop:
| | * Öffnen Sie WebStorm |
| * [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/game_loop/WK_GameLoop01/ WK_GameLoop01]
| | * Laden Sie die EcmaScript-Aufgabe auf Ihren Rechner: https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_EcmaScript.git<br/> |
| * [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/game_loop/WK_GameLoop02/ WK_GameLoop02]
| | ** <code>VCS</code> → <code>Check out from Version Control</code> → <code>git</code> |
| | | ** <code>https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_EcmaScript.git</code> → lokalen Ordner wählen → <code>Clone</code> |
| Sie können diese Projekte folgendermaßen auf Ihrem Rechner installieren:
| | ** <code>Yes</code> → <code>This Window</code>/<code>New Window</code> |
| | |
| * <code>VCS</code> → <code>Checkout from Version Control</code> → <code>Subversion</code> | |
| * Sofern noch nicht geschehen: Klick auf das grüne Plus-Symbol → Repository URL: <code>https://glossar.hs-augsburg.de/beispiel/tutorium/es6</code> | |
| * Klick auf die Pfeilspitze vor diesem Pfad → Klick auf die Pfeilspitze vor <code>game_loop</code> → Klick '''auf''' <code>WK_GameLoop02</code>
| |
| * <code>Checkout</code> (<code>WK_GameLoop01</code> dient nur didaktischen Zwecken und wird für diese Praktikumsaufgabe nicht benötigt.) | |
| * Speichern Sie das Projekt irgendwo auf Ihrem Rechner. '''Achtung: Speichern Sie das Projekt nicht innerhalb eines anderen Projektes (insbesondere nicht in Ihrem neuen Projekt) oder innerhalb eines Ordners, der bereits unter SVN-Kontrolle steht. Speichern meine Projekte in einem ganz anderen Ordner, der {{zB}} <code>KowaBeispiele</code> heißen könnte.''' | |
| * Öffnen Sie das Projekt und geben Sie im WebStorm-Terminal <code>npm install</code> (oder kurz <code>npm i</code>) ein, um alle benötigten Node.js-Module zu installieren.
| |
| | |
| Machen Sie sich mit den Projekten vertraut. Die Web-Anwendung <code>src/js/app</code> des zweiten Projektes dient als Ausgangsbasis für diese Praktikumsaufgabe.
| |
| | |
| Im ersten Beispiel finden Sie diverse Game-Loop-Varianten. Schrittweise werden potentielle
| |
| Probleme behoben. Dieses Projekt verfolgt das didaktische Ziel, Ihnen die Probleme und potentielle
| |
| Lösungen im Zusammenhang mit JavaScript-Animationen zu verdeutlichen.
| |
| | |
| Im zweiten Beispiel wurde eine einfache Game-Loop-Klasse realisiert, die sie für dieses Praktikum
| |
| nutzen können und sollten. Diese Klasse basiert auf den Ergebnissen des ersten Projektes,
| |
| stellt aber – im Gegensatz zu einigen Web-Anwendungen des ersten Projekt – bislang keine Informationen
| |
| über die aktuelle Frame-Rate bereit. Dies ist aber für diese Praktikumsaufgabe nicht von Interesse.
| |
| | |
| ==Aufgaben==
| |
| | |
| Laden Sie das leere Projekt [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/empty/WK_GameLoop02_Empty WK_GameLoop02_Empty] auf Ihren Rechner
| |
| (am Besten in den zuvor angelegten Ordner <code>KowaBeispiele</code>).
| |
| '''Installieren Sie diesmal aber nicht die Node.js-Module''', das machen Sie später. Sie finden das leere Projekt im zuvor aktivierten
| |
| Repository-Pfad <code>https://glossar.hs-augsburg.de/beispiel/tutorium/es6</code> im Unterordner <code>empty</code>.
| |
| | |
| Erstellen Sie ein neues Projekt <code>praktikum01</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)
| |
| sowie alle Dateien, die Sie im Wurzelverzeichnis des Projektes <code>WK_GameLoop02_Empty</code>
| |
| finden, mittels <code>Ctrl-/Apfel-C</code> <code>Ctrl-/Apfel-V</code> in Ihr eigenes Projekt. (Die Frage, ob WebStorm seinen eigenen File Watcher zum
| |
| Übersetzen von ES6-Code in ES5-Code verwenden soll, beantworten Sie bitte mit „No“. Das erledigt Webpack für Sie.)
| |
| | |
| Sie können Ihr Projekt zur Übung auch im Subversion-Repository speichern. Das ist aber nicht so wichtig.
| |
| | |
| Nun können Sie in Ihrem eigenen Projekt die benötigten Node.js-Module installieren: <code>npm i</code>.
| |
| | |
| In Ihrem Projekt finden Sie nun 10 Web-Anwendungen vor: <code>index01.html</code> verwendet die gepackte Version von <code>app01.js</code>,
| |
| die ihrerseits das Spiel <code>game01.js</code> einbindet. <code>index02.html</code>, <code>index03.html</code> etc. sind analog aufgebaut.
| |
| Wenn Sie irgendeine dieser Anwendungen im Browser öffnen, sehen Sie eine Eule in der linken oberen Bildschirmecke. Diese sollen
| |
| sie auf unterschiedliche Art und Weise animieren. Lösen Sie jede der folgenden Aufgaben in einer der vorgegebenen Apps.
| |
| Scheuen Sie sich nicht davor, eigene Experimente durchzuführen. Wenn die vorgegebenen Apps nicht ausreichen sollten, legen Sie einfach
| |
| noch ein paar an. (Vergessen Sie in diesem Fall nicht, <code>webpack.config.js</code> entsprechend zu erweitern.)
| |
| | |
| Schreiben Sie Ihre Lösungen der Aufgabe $i$ in die Datei <code>game</code>$i$<code>.js</code>.
| |
| Am einfachsten ist es, wenn Sie jeweils die Lösung der vorangegangenen Aufgabe kopieren und diese Kopie dann weiterentwickeln.
| |
| | |
| ===Aufgabe 1===
| |
| | |
| Lassen Sie die Eule horizontal vom linken bis zum rechten Fensterrand des Browsers fliegen.
| |
| | |
| Tipp: http://ryanve.com/lab/dimensions/
| |
| | |
| Berücksichtigen Sie, dass die Eule 150 Pixel breit ist und das der Ankerpunkt im linken oberen Eck des zugehörigen Bildes liegt.
| |
| Sie müssen daher im Eulen-Objekt auch die Breite der Eule speichern und diese Breite bei der Kollissionserkennung
| |
| und -behandlung berücksichtigen.
| |
| | |
| Beachten Sie bitte, dass Sie zur Lösung dieser Aufgabe einfach die Datei <code>game01.js</code> anpassen müssen.
| |
| Lassen Sie sich durch den Code der Datei <code>owl.js</code> aus dem Beispiel <code>WK_GameLoop02</code> inspirieren.
| |
| (Sie können auch <code>owl_interpolate.js</code> verwenden, aber das verwirrt Sie vermutlich zurzeit mehr, als dass es
| |
| Inhen nützt.) Eine Reset-Funktion, wie sie im genannten Beispiel definiert wird, brauchen Sie nicht zu implementieren,
| |
| da Sie das „Spiel“ nicht mit Hilfe von irgendwelchen Buttons anhalten und zurücksetzen werden. Dies gilt auch für alle folgenden
| |
| Aufgaben.
| |
| | |
| Vergessen Sie <code>grunt</code> oder besser noch <code>grunt watch</code> nicht. :-)
| |
| | |
| ===Aufgabe 2===
| |
| | |
| Lassen Sie die Eule nicht waagerecht, sondern in der horizontalen Mitte des Browserfensters senkrecht von Fenstrrand zu Fensterrand fliegen.
| |
| | |
| Um die Aufgabe zu lösen, müssen Sie für die Eule zusätzlich eine y-Position und eine y-Geschwindigkeit definieren. Die Berechnung der aktuellen y-Position funktioniert
| |
| analog zur Berechnung der aktuellen x-Position.
| |
| | |
| Vergessen Sie nicht auch die Kollissionserkennung und -behandlung für die beiden Bildschirmseiten <code>top</code> und <code>botton</code>
| |
| zu implementieren.
| |
| | |
| Und Sie müssen natürlich die Render-Funktion anpassen, sodass die aktuelle y-Position beim Rendern auch berücksichtigt wird.
| |
| | |
| ===Aufgabe 3===
| |
| | |
| Lassen Sie die Eule von der Browsermitte aus schräg über den Bildschirm fliegen. In x-Richtung soll sie doppelt so schnell sein (200 Pixel/s)
| |
| wie in y-Richtung (100 Pixel/s).
| |
| | |
| ===Aufgabe 4===
| |
| | |
| Setzen Sie die x-Start-Position der Eule auf <code>-100</code> und starten Sie die Web-App. Den Effekt, den Sie sehen, nennt
| |
| man [[Kollisionserkennung und -behandlung|Penetration]]. Die Eule hängt in der Wand fest, da Sie in einem Schritt nicht den Kollissionsbereich
| |
| (die linke Wand) verlässt. Daher besteht die Kollission fort und im nächsten Schritt ändert sie wieder ihre Flugrichtung.
| |
| | |
| Verbessern Sie das, indem Sie die Kollisionserkennung und -behandlung verbessern:
| |
| | |
| <source lang="javascript">
| |
| if (v_owl.x <= v_stage.left)
| |
| {
| |
| v_owl.vx = Math.abs(v_owl.vx);
| |
| }
| |
| if (v_owl.x >= v_stage.right - v_owl.width)
| |
| {
| |
| v_owl.vx = -Math.abs(v_owl.vx);
| |
| }
| |
| </source>
| |
| | |
| Passen Sie die Kollisionserkennung und -behandlung in y-Richtung analog an.
| |
| | |
| Sie können und sollten sogar noch einen Schritt weiter gehen und die Eule
| |
| wieder zurück auf die Bühne schieben, wenn Sie in die Wand eingedrungen ist.
| |
| In die Wand einzudringen ist zwar physikalisch nicht möglich, aber leider in
| |
| einer Simulation der physikalischen Welt nur schwer zu vermeiden, da die
| |
| Position nur alle 16,7 ms berechnet wird. War die Eule zu einem Zeitpunkt
| |
| noch vor der Mauer, kann Sie beim nächsten Schritt schon drinnen stecken.
| |
| Insbesondere bei sehr schnellen Objekten kann das dann zu PEnetrations-Effekten führen.
| |
| | |
| Also schieben Sie die Eule besser zurück auf die Bühne.
| |
| | |
| <source lang="javascript">
| |
| if (v_owl.x <= v_stage.left)
| |
| {
| |
| v_owl.x = v_stage.left;
| |
| v_owl.vx = Math.abs(v_owl.vx);
| |
| }
| |
| if (v_owl.x >= v_stage.right - v_owl.width)
| |
| {
| |
| v_owl.x = v_stage.right - v_owl.width;
| |
| v_owl.vx = -Math.abs(v_owl.vx);
| |
| }
| |
| </source>
| |
| | |
| Passen Sie die Kollisionserkennung und -behandlung in y-Richtung wiederum analog an.
| |
| | |
| ===Aufgabe 5===
| |
| | |
| Ändern Sie die Kollisionserkennung und -behandlung so ab, dass die Eule ausgehend von der linken oberen Fensterecke
| |
| im Uhrzeigersinn sich immer entlang des Fensterrandes bewegt.
| |
| | |
| Beachten Sie bitte: Hier ist es besonders wichtig, dass Sie die Eule wieder auf die Bühne zurückbewegen, wenn sie mit einer
| |
| Wand kollidiert. Ansonsten verschwindet die Eule schnell im Nirgendwo.
| |
| | |
| (Anmerkung: Dies war einmal eine Aufgabe im Rahmen des Prüfungspraktikums, wobei die Lösung zur 3. Aufgabe vorgegeben war.)
| |
| | |
| ===Aufgabe 6===
| |
| | |
| Kopieren Sie diesmal nicht die Lösung von Aufgabe 5, sondern von Aufgabe 4. Im folgenden arbeiten Sie
| |
| wieder mit der normalen Kollissionserkennung und -behandlung. Positionieren Sie die Eule allerdings wieder im linken oberen Eck
| |
| (in Aufgabe 4 hatten Sie sie außerhalb der Bühne platziert).
| |
|
| |
|
| Die neue Position der Eule berechnet man mit Hilfe der Geschwindigkeit (velocity). Doch auch die
| | Sie finden in dem Projekt ein paar JavaScript-Dateien, die im viele Kommentare jeweils gefolgt von einem |
| Geschwindigkeit kann sich ändern. Dazu benötigt man die Beschleunigung (acceleration).
| | Befehl <code>console.log</code> enthalten. |
|
| |
|
| Fügen Sie zu Ihrer Eule zwei weitere Attribute <code>ax</code> (Beschleunigung in x-Richtung) und
| | Der Befehl <code>console.log(ARGUMENT1, ARGUMENT2, ...)</code> evaluiert die ihm übergebenen Argumente |
| <code>ay</code> (Beschleunigung in y-Richtung) hinzu. Setzen Sie die Initialwerte auf
| | und gibt das Ergebnis in der Konsole aus. |
| <code>400</code> (Pixel pro Sekunde) bzw. <code>200</code> (Pixel pro Sekunde). Das heißt, Sie möchten,
| |
| dass die Eule in jeder Sekunde um 400 bzw. 200 Pixel pro Sekunde mehr zurücklegt als zuvor.
| |
|
| |
|
| Wenn Sie jetzt die Web-App starten, beschleunigt die Eule allerdings noch nicht.
| | Sie können eine JavaScript-Datei in WebStorm direkt ausführen: |
|
| |
|
| In Ihrem Code wird die Position 60 mal pro Sekunde mit Hilfe des folgenden Codes aktualisiert:
| | * Im Dateibaum: Rechtsklick auf den Dateinamen → Klick auf <code>run 'DATEINAME.js'</code> |
|
| |
|
| <source lang="javascript"> | | Führen Sie testhalber einmal die Datei <code>es01.js</code> aus. Dabei passiert Folgendes: |
| v_owl.x += v_owl.vx * p_frac_s;
| | Jeder in der Datei enthaltene JavaScript-Befehl wird der Reihe nach eingelesen und ausgeführt. |
| v_owl.y += v_owl.vy * p_frac_s;
| | Sie wird also mit einer Read-Eval-Loop ausgeführt. Im Gegensatz zur Read-Eval-Print-Loop, |
| </source> | | die Sie beispielsweise von der Browser-Konsole kennen, werden {{iAllg}} keine Ergebnisse ausgedruckt. |
| | Dafür benötigen Sie den Befehl <code>console.log</code>. Wann immer Sie beim Interpretieren |
| | eine JavaScript-Datei ein (Zwischen-)Ergenis im Konsolfenster ausgeben woll, rufen Sie einfach diesen Befehl auf. |
|
| |
|
| Die Geschwindigkeit wird zur Position hinzuaddiert. Allerdings ist die Geschwindigkeit
| | '''Der Befehl <code>console.log</code> ist der wichtigste Befehl zu Debuggen eines JavaScript-Programms.''' |
| in Pixeln pro Sekunde angegeben. Die Modellaktualisierung passiert jedoch alle $0,0167$
| |
| Sekunden. In dieser Zei bewegt sich die Eule nur um das $0,0167$-fache (= $1,67$%) der Sekundengeschwindigkeit weiter.
| |
|
| |
|
| Auf genau dieselbe Weise wird die aktuelle Geschwindigkeit mit Hilfe der Beschleunigung
| | BTW: Auch in WebStorm gibt es eine echte Read-Eval-Print-Loop. Öffen Sie einfach das Terminal und geben Sie <code>node</code> ein. |
| berechnet:
| | Damit starten Sie den Node.js-Interpreter, der auf Ihre Eingaben wartet, diese auswertet und sofort das Ergebnis ausliefert. |
| | Durch die Eingabe von <code>Strg-d</code> können Sie den Node.js-Interpreter wieder beenden. Im Folgenden sollten Sie |
| | Node.js jedoch mittels des Run-Befehls von WebStorm aktivieren. |
|
| |
|
| <source lang="javascript">
| | ===Aufgaben=== |
| v_owl.vx += v_owl.ax * p_frac_s;
| |
| v_owl.vy += v_owl.ay * p_frac_s;
| |
| </source>
| |
|
| |
|
| Fügen Sie diesen Code in Ihre Model-Update-Funktion ein und starten Sie die Eule erneut.
| | Bearbeiten Sie die Aufgaben, die Sie in den JavaScript-Dateien vorfinden. Fügen Sie hinter jeden Kommentar im Anschluss an den zugehörigen |
| Wenn Sie jetzt Ihre We-App laufen lassen, stellen Sie fest, dass die Eule zunächst beschleunigt,
| | <code>console.log</code>-Befehl JavaScript-Code ein, der die im Kommentar beschriebene Aufgabe erledigt. |
| nach eine Kollission aber wieder abbremst. NAch der nächsten Kollission beschleunigt sie wieder.
| |
|
| |
|
| Um diesen Effekt zu vermeiden, müssen Sie jedes mal, wenn Sie bei der Kollissionsbehandlung das Vorzeichen
| | Wenn Sie alles richtig machen, sollten die Run-Befehle folgende Ausgaben in der Konsole zur Folge haben. |
| der Geschwindigkeit ändern, das Vorzeichen der zugehörigen Beschleunigung analog ändern.
| | (Achtung: Auch wenn Sie nicht alles richtig machen, können die Konsolausgaben stimmen. Sie könnten ja beispielsweise immer sofort |
| | das zu erwartende Ergebnis direkt ausgeben, ohne es vorher mittles JavaScript zu berechnen. Das wären natürlich Lösungen, die in |
| | einer Prüfung nicht gewertet werden würden.) |
|
| |
|
| Beispielsweise mus der Code
| | Bei den Aufgaben „1 f“ und „1 g“ gebe ich die Ergebnisse von alternativen Berechnungsmöglichkeiten aus. |
| | Sie brauchen natürlich keine fünf Alternativen anzugeben. Aber wenn Sie ein bisschen experimentieren, |
| | schadet das sicher nicht. |
|
| |
|
| <source lang="javascript"> | | '''Run <code>es01.js</code> (Musterlösung)''' |
| v_owl.vx = -Math.abs(v_owl.vx);
| | <pre> |
| </source> | | Aufgabe 1 a: |
| | -199998 |
|
| |
|
| um
| | Aufgabe 1 b: |
| | -199998 |
|
| |
|
| <source lang="javascript">
| | Aufgabe 1 c: |
| v_owl.ax = -Math.abs(v_owl.ax);
| | -399996 |
| </source>
| |
|
| |
|
| ergänzt werden.
| | Aufgabe 1 d: |
| | -399996 |
|
| |
|
| ===Aufgabe 7===
| | Aufgabe 1 e: |
| | -399996-399996 |
|
| |
|
| Schreiben Sie die Kollissionsbehandlung so um, dass im Falle einer Kollission der Eule
| | Aufgabe 1 f: |
| mit dem unteren Fensterrand sowohl die Geschwindigkeit als auch die Beschleunigung
| | -799992 '(Alternative 1)' |
| jeweils in x- und in y-Richtung auf Null gesetzt wird. Das heißt, die
| | -799992 '(Alternative 2)' |
| Eule bleibt bei einer Kollision mit dem unteren Rand stehen stehen.
| | -799992 '(Alternative 3)' |
| | -799992 '(Alternative 4)' |
| | -799992 '(Alternative 5)' |
|
| |
|
| ===Aufgabe 8===
| | Aufgabe 1 g: |
| | 3.15-0.840734641E-2 |
| | 3.14159265359 '(Alternative 1)' |
| | 3.14159265359 '(Alternative 2)' |
| | </pre> |
|
| |
|
| Positionieren Sie die Eule im linken oberen Eck, geben Sie ihr eine Geschwindigkeit von
| | '''Run <code>es02.js</code> (Musterlösung)''' |
| 300 Pixeln in x-Richtung und von 0 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
| | <pre> |
| die Beschleunigung in y-Richtung 800. (Diese Zahlen sind gut für meinen Monitor geeignet,
| | Aufgabe 2 a: |
| der eine Auflösung von 1600x900 hat. Wenn Sie einen deutlich kleineren oder größeren
| | [ 4, false, 'Hallo', [ 2, 4, 2, 8 ] ] |
| Monitor haben, müssen Sie die Zahlen evtl. anpassen.)
| |
|
| |
|
| Welche Kurve beschreibt die Eule, wenn Sie die Web-App starten?
| | Aufgabe 2 b: |
| | [ 2, 4, false, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ] |
|
| |
|
| ===Aufgabe 9===
| | Aufgabe 2 c: |
| | 2 false |
|
| |
|
| Positionieren Sie die Eule im linken unteren Eck, geben Sie ihr eine Geschwindigkeit von
| | Aufgabe 2 d: |
| 300 Pixeln in x-Richtung und von -400 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
| | [ 4, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ] |
| die Beschleunigung in y-Richtung 200.
| |
|
| |
|
| Welche Kurve beschreibt die Eule, wenn Sie die Web-App starten?
| | Aufgabe 2 e: |
| | 8 undefined |
|
| |
|
| Jetzt fehlt nur noch en Gummiband, mit dem Sie die Eule beschleunigen können. :-)
| | Aufgabe 2 f: |
| | [ 4, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg', 2, 4, 2, 8 ] |
| | length: 8 |
|
| |
|
| ===Aufgabe 10===
| | Aufgabe 2 g: |
| | [ [], [ [] ] ] |
| | length: 2 |
|
| |
|
| Machen Sie eigene Experimente. Bringen Sie {{zB}} die Eule dazu, wie ein Flummi
| | Aufgabe 2 h: |
| zu springen, indem sie ihre Geschwindigkeit in x- und y-Richtung bei einem Bodenkontakt
| | 1. [ [], [ [] ], [Circular] ] --- length: 3 |
| um einen gewissen Prozentsatz reduzieren, aber nicht gleich auf null setzen.
| | 2. [] --- length: 0 |
| (Die Beschleunigung, die die Erdanziehung simuliert, bleibt die ganze Zeit über gleich).
| | 3. [ [] ] --- length: 1 |
| Achtung: Bei einem Bodenkontakt, dreht sich das Vorzeichen der y-Geschwindigkeit um,
| | 4. [ [], [ [] ], [Circular] ] --- length: 3 |
| das der x-Geschwindigkeit bleibt gleich.
| | 5. [] --- length: 0 |
| | 6. undefined |
| | 7. [ [], [ [] ], [Circular] ] --- length: 3 |
|
| |
|
| Nervig ist, dass die Eule zum Schluss immer noch ganz leicht hüpft und gar nicht
| | Aufgabe 2 i: |
| zur Ruhe kommt. Vielleicht können Sie auch dieses Problem beheben.
| | [ [], [ [] ], [Circular] ] |
| | [ [], [ [] ], [Circular] ] |
| | [ [], [ [] ], [Circular] ] |
| | [ [], [ [] ], [Circular] ] |
| | [ [], [ [] ], [Circular] ] |
| | </pre> |
|
| |
|
| Oder probieren Sie etwas ganz anderes aus.
| |
| ==Quellen== | | ==Quellen== |
| <references/> | | <references/> |
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
Korrektheit: 3
(zu größeren Teilen überprüft)
|
Umfang: 4
(unwichtige Fakten fehlen)
|
Quellenangaben: 3
(wichtige Quellen vorhanden)
|
Quellenarten: 5
(ausgezeichnet)
|
Konformität: 3
(gut)
|
Vorlesung MMProg
Inhalt |
EcmaScript01 |
EcmaScript02 |
EcmaScript03 |
Ball 01|
Ball 02 |
Ball 03 |
Pong 01
Musterlösung: Git-Repository (noch nicht online)
Vorbereitung
Sie finden in dem Projekt ein paar JavaScript-Dateien, die im viele Kommentare jeweils gefolgt von einem
Befehl console.log enthalten.
Der Befehl console.log(ARGUMENT1, ARGUMENT2, ...) evaluiert die ihm übergebenen Argumente
und gibt das Ergebnis in der Konsole aus.
Sie können eine JavaScript-Datei in WebStorm direkt ausführen:
- Im Dateibaum: Rechtsklick auf den Dateinamen → Klick auf
run 'DATEINAME.js'
Führen Sie testhalber einmal die Datei es01.js aus. Dabei passiert Folgendes:
Jeder in der Datei enthaltene JavaScript-Befehl wird der Reihe nach eingelesen und ausgeführt.
Sie wird also mit einer Read-Eval-Loop ausgeführt. Im Gegensatz zur Read-Eval-Print-Loop,
die Sie beispielsweise von der Browser-Konsole kennen, werden i. Allg. keine Ergebnisse ausgedruckt.
Dafür benötigen Sie den Befehl console.log. Wann immer Sie beim Interpretieren
eine JavaScript-Datei ein (Zwischen-)Ergenis im Konsolfenster ausgeben woll, rufen Sie einfach diesen Befehl auf.
Der Befehl console.log ist der wichtigste Befehl zu Debuggen eines JavaScript-Programms.
BTW: Auch in WebStorm gibt es eine echte Read-Eval-Print-Loop. Öffen Sie einfach das Terminal und geben Sie node ein.
Damit starten Sie den Node.js-Interpreter, der auf Ihre Eingaben wartet, diese auswertet und sofort das Ergebnis ausliefert.
Durch die Eingabe von Strg-d können Sie den Node.js-Interpreter wieder beenden. Im Folgenden sollten Sie
Node.js jedoch mittels des Run-Befehls von WebStorm aktivieren.
Aufgaben
Bearbeiten Sie die Aufgaben, die Sie in den JavaScript-Dateien vorfinden. Fügen Sie hinter jeden Kommentar im Anschluss an den zugehörigen
console.log-Befehl JavaScript-Code ein, der die im Kommentar beschriebene Aufgabe erledigt.
Wenn Sie alles richtig machen, sollten die Run-Befehle folgende Ausgaben in der Konsole zur Folge haben.
(Achtung: Auch wenn Sie nicht alles richtig machen, können die Konsolausgaben stimmen. Sie könnten ja beispielsweise immer sofort
das zu erwartende Ergebnis direkt ausgeben, ohne es vorher mittles JavaScript zu berechnen. Das wären natürlich Lösungen, die in
einer Prüfung nicht gewertet werden würden.)
Bei den Aufgaben „1 f“ und „1 g“ gebe ich die Ergebnisse von alternativen Berechnungsmöglichkeiten aus.
Sie brauchen natürlich keine fünf Alternativen anzugeben. Aber wenn Sie ein bisschen experimentieren,
schadet das sicher nicht.
Run es01.js (Musterlösung)
Aufgabe 1 a:
-199998
Aufgabe 1 b:
-199998
Aufgabe 1 c:
-399996
Aufgabe 1 d:
-399996
Aufgabe 1 e:
-399996-399996
Aufgabe 1 f:
-799992 '(Alternative 1)'
-799992 '(Alternative 2)'
-799992 '(Alternative 3)'
-799992 '(Alternative 4)'
-799992 '(Alternative 5)'
Aufgabe 1 g:
3.15-0.840734641E-2
3.14159265359 '(Alternative 1)'
3.14159265359 '(Alternative 2)'
Run es02.js (Musterlösung)
Aufgabe 2 a:
[ 4, false, 'Hallo', [ 2, 4, 2, 8 ] ]
Aufgabe 2 b:
[ 2, 4, false, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ]
Aufgabe 2 c:
2 false
Aufgabe 2 d:
[ 4, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ]
Aufgabe 2 e:
8 undefined
Aufgabe 2 f:
[ 4, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg', 2, 4, 2, 8 ]
length: 8
Aufgabe 2 g:
[ [], [ [] ] ]
length: 2
Aufgabe 2 h:
1. [ [], [ [] ], [Circular] ] --- length: 3
2. [] --- length: 0
3. [ [] ] --- length: 1
4. [ [], [ [] ], [Circular] ] --- length: 3
5. [] --- length: 0
6. undefined
7. [ [], [ [] ], [Circular] ] --- length: 3
Aufgabe 2 i:
[ [], [ [] ], [Circular] ]
[ [], [ [] ], [Circular] ]
[ [], [ [] ], [Circular] ]
[ [], [ [] ], [Circular] ]
[ [], [ [] ], [Circular] ]
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
