MMProg: Praktikum: WiSe 2018/19: EcmaScript01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (13 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
{{MMProg:Praktikum:WiSe 2018/19:Menü}} | {{MMProg:Praktikum:WiSe 2018/19:Menü}} | ||
'''Musterlösung''': [ | '''Musterlösung''': [{{Git-Server}}/kowa/WK_EcmaScript01_Musterloesung Git-Repository] | ||
==Vorbereitung== | ==Vorbereitung== | ||
* Öffnen Sie WebStorm | * Öffnen Sie WebStorm | ||
* Laden Sie die EcmaScript-Aufgabe auf Ihren Rechner: | * Laden Sie die EcmaScript-Aufgabe auf Ihren Rechner: | ||
** <code>VCS</code> → <code>Check out from Version Control</code> → <code>git</code> | ** <code>VCS</code> → <code>Check out from Version Control</code> → <code>git</code> | ||
** <code> | ** <code>{{Git-Server}}/kowa/WK_EcmaScript01.git</code> → lokalen Ordner wählen → <code>Clone</code> | ||
** <code>Yes</code> → <code>This Window</code>/<code>New Window</code> | ** <code>Yes</code> → <code>This Window</code>/<code>New Window</code> | ||
| Zeile 25: | Zeile 25: | ||
die Sie beispielsweise von der Browser-Konsole kennen, werden {{iAllg}} keine Ergebnisse ausgedruckt. | 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 | Dafür benötigen Sie den Befehl <code>console.log</code>. Wann immer Sie beim Interpretieren | ||
eine JavaScript-Datei ein (Zwischen-) | eine JavaScript-Datei ein (Zwischen-)Ergebnis im Konsolfenster ausgeben wollen, rufen Sie einfach diesen Befehl auf. | ||
'''Der Befehl <code>console.log</code> ist der wichtigste Befehl zu Debuggen eines JavaScript-Programms.''' | '''Der Befehl <code>console.log</code> ist der wichtigste Befehl zu Debuggen eines JavaScript-Programms.''' | ||
BTW: Auch in WebStorm gibt es eine echte Read-Eval-Print-Loop. | BTW: Auch in WebStorm gibt es eine echte Read-Eval-Print-Loop. Öffnen Sie einfach das Terminal und geben Sie <code>node</code> ein. | ||
Damit starten Sie den Node.js-Interpreter, der auf Ihre Eingaben wartet, diese auswertet und sofort das Ergebnis ausliefert. | 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 | Durch die Eingabe von <code>Strg-d</code> können Sie den Node.js-Interpreter wieder beenden. Im Folgenden sollten Sie | ||
| Zeile 41: | Zeile 41: | ||
Wenn Sie alles richtig machen, sollten die Run-Befehle folgende Ausgaben in der Konsole zur Folge haben. | 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 | (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 | das zu erwartende Ergebnis direkt ausgeben, ohne es vorher mittels JavaScript zu berechnen. Das wären natürlich Lösungen, die in | ||
einer Prüfung nicht gewertet werden würden.) | einer Prüfung nicht gewertet werden würden.) | ||
Bei den Aufgaben | Bei den Aufgaben 1f und 1g gebe ich die Ergebnisse von alternativen Berechnungsmöglichkeiten aus. | ||
Sie brauchen natürlich keine fünf Alternativen anzugeben. Aber wenn Sie ein bisschen experimentieren, | Sie brauchen natürlich keine fünf Alternativen anzugeben. Aber wenn Sie ein bisschen experimentieren, | ||
schadet das sicher nicht. | schadet das sicher nicht. | ||
'''Run <code> | '''Run <code>es01_arithmetic.js</code> (Konsolausgabe der [{{Git-Server}}/kowa/WK_EcmaScript01_Musterloesung Musterlösung])''' | ||
<pre> | <pre> | ||
Aufgabe | Aufgabe 1a: | ||
-199998 | -199998 | ||
Aufgabe | Aufgabe 1b: | ||
-199998 | -199998 | ||
Aufgabe | Aufgabe 1c: | ||
-399996 | -399996 | ||
Aufgabe | Aufgabe 1d: | ||
-399996 | -399996 | ||
Aufgabe | Aufgabe 1e: | ||
-399996-399996 | -399996-399996 | ||
Aufgabe | Aufgabe 1f: | ||
-799992 '(Alternative 1)' | -799992 '(Alternative 1)' | ||
-799992 '(Alternative 2)' | -799992 '(Alternative 2)' | ||
| Zeile 72: | Zeile 72: | ||
-799992 '(Alternative 5)' | -799992 '(Alternative 5)' | ||
Aufgabe | Aufgabe 1g: | ||
3.15-0.840734641E-2 | 3.15-0.840734641E-2 | ||
3.14159265359 '(Alternative 1)' | 3.14159265359 '(Alternative 1)' | ||
| Zeile 78: | Zeile 78: | ||
</pre> | </pre> | ||
'''Run <code> | '''Run <code>es02_array.js</code> (Konsolausgabe der [{{Git-Server}}/kowa/WK_EcmaScript01_Musterloesung Musterlösung])''' | ||
<pre> | <pre> | ||
Aufgabe | Aufgabe 2a: | ||
[ 4, false, 'Hallo', [ 2, 4, 2, 8 ] ] | [ 4, false, 'Hallo', [ 2, 4, 2, 8 ] ] | ||
Aufgabe | Aufgabe 2b: | ||
[ 2, 4, false, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ] | [ 2, 4, false, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ] | ||
Aufgabe | Aufgabe 2c: | ||
2 false | 2 false | ||
Aufgabe | Aufgabe 2d: | ||
[ 4, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ] | [ 4, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ] | ||
Aufgabe | Aufgabe 2e: | ||
8 undefined | 8 undefined | ||
Aufgabe | Aufgabe 2f: | ||
[ 4, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' | [ 2, 4, 2, 8, 4, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ] | ||
length: 8 | length: 8 | ||
Aufgabe | Aufgabe 2g: | ||
[ [], [ [] ] ] | [ [], [ [] ] ] | ||
length: 2 | length: 2 | ||
Aufgabe | Aufgabe 2h: | ||
1. [ [], [ [] ], [Circular] ] --- length: 3 | 1. [ [], [ [] ], [Circular] ] --- length: 3 | ||
2. [] --- length: 0 | 2. [] --- length: 0 | ||
| Zeile 112: | Zeile 112: | ||
7. [ [], [ [] ], [Circular] ] --- length: 3 | 7. [ [], [ [] ], [Circular] ] --- length: 3 | ||
Aufgabe | Aufgabe 2i: | ||
[ [], [ [] ], [Circular] ] | [ [], [ [] ], [Circular] ] | ||
[ [], [ [] ], [Circular] ] | [ [], [ [] ], [Circular] ] | ||
Aktuelle Version vom 28. Oktober 2018, 16:30 Uhr
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) |
Inhalt | EcmaScript01 | EcmaScript02 | EcmaScript03 | Ball 01| Ball 02 | Ball 03 | Pong 01
Musterlösung: Git-Repository
Vorbereitung
- Öffnen Sie WebStorm
- Laden Sie die EcmaScript-Aufgabe auf Ihren Rechner:
VCS→Check out from Version Control→githttps://gitlab.multimedia.hs-augsburg.de/kowa/WK_EcmaScript01.git→ lokalen Ordner wählen →CloneYes→This Window/New Window
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-)Ergebnis im Konsolfenster ausgeben wollen, 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. Öffnen 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 mittels JavaScript zu berechnen. Das wären natürlich Lösungen, die in einer Prüfung nicht gewertet werden würden.)
Bei den Aufgaben 1f und 1g 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_arithmetic.js (Konsolausgabe der Musterlösung)
Aufgabe 1a: -199998 Aufgabe 1b: -199998 Aufgabe 1c: -399996 Aufgabe 1d: -399996 Aufgabe 1e: -399996-399996 Aufgabe 1f: -799992 '(Alternative 1)' -799992 '(Alternative 2)' -799992 '(Alternative 3)' -799992 '(Alternative 4)' -799992 '(Alternative 5)' Aufgabe 1g: 3.15-0.840734641E-2 3.14159265359 '(Alternative 1)' 3.14159265359 '(Alternative 2)'
Run es02_array.js (Konsolausgabe der Musterlösung)
Aufgabe 2a: [ 4, false, 'Hallo', [ 2, 4, 2, 8 ] ] Aufgabe 2b: [ 2, 4, false, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ] Aufgabe 2c: 2 false Aufgabe 2d: [ 4, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ] Aufgabe 2e: 8 undefined Aufgabe 2f: [ 2, 4, 2, 8, 4, 'Hallo', [ 2, 4, 2, 8 ], 'MMProg' ] length: 8 Aufgabe 2g: [ [], [ [] ] ] length: 2 Aufgabe 2h: 1. [ [], [ [] ], [Circular] ] --- length: 3 2. [] --- length: 0 3. [ [] ] --- length: 1 4. [ [], [ [] ], [Circular] ] --- length: 3 5. [] --- length: 0 6. undefined 7. [ [], [ [] ], [Circular] ] --- length: 3 Aufgabe 2i: [ [], [ [] ], [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)
