Lernpfad Sachunterricht/Kinderrechte/Text 2

JavaScript ist eine Programmiersprache, die in allen Browsern integriert ist. Um JavaScript zu programmieren, benötigt man nur einen Browser und einen (kostenlosen) Code-Editor. Die Skripte können problemlos in HTML-Seiten eingebunden werden.

JavaScript im Unterricht

Der Einsatz von JavaScript als Programmiersprache im Unterricht ist umstritten.

• Vorteil von JavaScript ist, dass es auf quasi jedem Betriebssystem ohne weitere Installation vorhanden ist (es benötigt nur einen Browser und einen Code-Editor).
• Als Nachteil ist die recht unsaubere Typendeklaration der Variablen zu nennen. Die selbe Variable kann Zahl oder String sein. Das kann zu Problemen führen: 1+1 ergibt 11, falls eine der Einsen vom Typ String war.
• JavaScript ist eine objektbasierte Sprache. Es können auch eigene Objekte angelegt werden. Kapselung (Geheimnisprinzip) wird unterstützt ().
• Alle modernen Browser besitzen eine Konsole, mit der Sie eine Fehleranalyse betreiben und JavaScript debuggen können.
• Grafik ist schwierig umzusetzen - es ist jedoch möglich mit JavaScript in einem Canvas zu zeichnen oder SVG-Grafiken zu verändern
• Motivierend ist, dass mit JavaScript kleinere Programme ohne größeren Aufwand auf die Schulhomepage gestellt werden können (eignet sich auch für den Mathematikunterricht). Günstig ist die syntaktische Ähnlichkeit mit Java.
• Fazit: JS eignet sich hervorragend, um schnell kleine Programme zu schreiben, die plattformunabhängig auch auf leistungsschwachen Rechnern laufen. Es eignet sich um grundlegende Programmiertechniken zu vermitteln, aufgrund der beschriebenen Unsauberkeiten ist JS aber nicht als ausschließliche Sprache zu empfehlen.

Unterrichtsideen

Hier finden Sie Programmieraufgaben, die Sie im Unterricht zur Einführung in das Programmieren mit JavaScript verwenden können.

Didaktische Vorüberlegungen

JavaScript wird hauptsächlich in Webseiten eingebunden. In diesen Beispielen funktioniert JavaScript auch ohne DOM; ist also letztlich eine Einführung in die Algorithmik und Datenstrukturen.

Ein- und Ausgabe und erste Variablen

• Befehlsausführer mit eval
• Ausgabe: Hallo Welt (mit alert und document.write)
• Programm: Hallo User
• Umgang mit Variablen - Erste Variable mit Zuweisung und Rechnung, Eingabe mit prompt
• Typkonvertierungen

• Aufgabe: Mehrwertsteuerkalkulation
• Aufgabe: Umrechner Menschenjahre - Hundejahre
• Aufgabe: Funktionsberechner (ggf. mit eval Befehl)

Vertiefung Variablen

• Datentypen: Number, String, ggf. Boolean
• Regel: Die Doppelfunktion des + Zeichens (bei String und Zahlen)
• Schönere Ausgaben mit Hilfe von Verbindung Variablen und konstanten Texten, br-Tag, Leerzeichen innerhalb von Anführungsstrichen

• Aufgabe: Mehrwertsteuer mit angenehmer Ausgabe
• Aufgabe: Uhrzeitkalkulationen: Wie viele Minuten sind seit Mitternacht vergangen (Zusatz: Sekunden etc.)
• Aufgabe: Differenz zwischen zwei Uhrzeiten (Hinführung zu if)
• x+=1 oder x++ oder x=x+1 ansprechen (Hinweis auf Deutung, die anders ist als in Mathe).

Kryptographie: Verschiebechiffren

• Cäsar Chiffre
• Cäsar I - nur Zahlen
• Cäsar II - Buchstaben (charCodeAt())
• Einführung if durch Übertragsproblem beim Cäsar Chiffre

if...else

• Rabattrechner: Ab einer Summe von 100 Euro gibt es 5% Rabatt.
• Waage: Setzen Sie ein Programm um. das das "Idealgewicht" auswertet und dem Benutzer auf nette Weise sagt, ob er zu leicht oder zu schwer ist. Das "Idealgewicht" wird nach folgender Formel bestimmt: (Körpergröße-100)*1.1
• BMI (Body Mass Index)
• PQ-Formel
• Kalenderkalkulationen (z.B. Schaltjahre), Überlauf einer Uhr abfangen

Schleifen

while-Schleife

• Lassen Sie die Zahlen von 1 bis 100 auf dem Bildschirm ausgeben, und zwar a) aufsteigend b) absteigend. c) Geben Sie nur gerade Zahlen oder nur ungerade Zahlen aus.
• Geben Sie von 1 bis zu einer einzugebenden Zahl n alle natürlichen Zahlen und a) Die Quadrate 12 bis n2 (Zahl mit sich selbst multiplizieren! 1,4,9,16…) b) Die Zweierpotenzen 21 bis 2n ( 2,4,8,16,32…) c) Die Fakultäten 1! Bis n! (1!=1, 2!=1*2, 3!=1*2*3, 4!=1*2*3*4, …)
• Schreiben Sie ein Programm, das die Eingabe eines Passwortes simuliert und je nach Eingabe unterschiedlich reagiert. Das Passwort sei a) im Programm fest als "H2OP&O" vorgegeben b) vom Benutzer zuerst einmal einzugeben (Variable benutzen!).
• Schreiben Sie ein Programm, das ein Spiel "Zahlenraten" simuliert. Der Benutzer dabei eine geheime Zahl erraten, die im Programm fest vorgeben sei. Er kann maximal 5 mal raten und der Computer soll ihm nach jeder Eingabe eine Meldung ausgeben, ob seine Eingabezahl größer oder kleiner als die gesuchte Zahl ist.

Exkurs: von-Neumann-Rechner-Simulation

• JavaScript/Von-Neumann-Rechner-Simulation‎

Tipps und Tricks

• Die Probleme mit den Datentypen entstehen in der Regel, wenn numerische Benutzereingaben mit Zahlen verrechnet werden sollen. Das Problem lässt sich auf folgende Weise umgehen: x = Number(prompt('Bitte eine Zahl eingeben',0));

Weblinks

• Überblick: Javascript

Tutorials

SELFHTML bietet eine aktuelle und umfangreiche Dokumentation mit vielen Tutorials. Skripte können im SELFHTML-Frickl selbst verändert und live ausprobiert werden:

• JavaScript: Portalseite mit aktueller Dokumentation
  • JavaScript/Tutorials: Portalseite mit vielen aktuellen Tutorials
    • Einstieg in die Programmierung mit JavaScript
    • Einstieg in das DOM und die Einbindung in Webseiten

• http://www.squarefree.com/jsenv/ und auch http://www.squarefree.com/shell/shell.html (interessante Ideen)
• JavaScript-Kurs der Schule am Ried (W. Spiegel)

JavaScript und Grafik

• Vectorgrafik in JS: http://www.walterzorn.de/
• SVG und JS: Linkliste http://www.scale-a-vector.de/link-d.htm