Programmieren in JAVASCRIPT

Dieses Wiki zum Thema "Programmieren in Javascript" wird gepflegt von Rüdiger Borrmann. Es dient am OSZ KIM in Berlin der Ausbildung zum/zur Medienassistenten/Medienassistentin im Fach WT (Webtechnologie). Das Ziel dieses Wikis ist es, wichtige Aspekte der Programmierung zu benennen und dazu passende handlungsorientierte Aufgabenstellungen, Übungen und Tests bereitzustellen. Im Unterricht werden die Themen in angemessener Tiefe entsprechend praktischer Erfordernisse behandelt.

Was ist Javascript?

Zuvor werden im Unterricht Kenntnisse zur Erstellung von HTML5-Seiten vermittelt,

Teilen Sie mir ggf. erkannte Fehler bitte sofort mit, damit ich für Abhilfe sorgen kann.
Kontakt: R. Borrmann -> b o r r m a n n @ o s z k i m . d e



Handwerkszeug/Grundlagen

Die folgenden Übungen bauen aufeinander auf und müssen selbstständig bearbeitet werden. Dieses hier zu übende "Handwerk" ist die Voraussetzung für die erfolgreiche Programmierung größerer Problemstellungen. Es macht Sinn, die aufeinander aufbauenden Übungen in der vorgegebenen Reihenfolge zu bearbeiten und sich nebenbei eine eigene "short reference" zu erstellen.

Hinweis: Die erfolgreiche Bewältigung der Übungen ist die Voraussetzung für die Zulassung zu den Projektaufgaben!

Vorlagen

HTML5-Seiten, die Sie als Vorlage für Ihre zu schreibenden Programme benutzen können, finden Sie hier:


-Information-
Übungen und
kl. Programme
Lösungen
Test
-Kommentar-





1. Halbjahr

Kenntnisstufe A



Das Ausbildungsziel im ersten Halbjahr wird verfehlt, wenn die in Kenntnisstufe A vermittelten Grundkenntnisse nicht beherrscht werden!

Entwicklungsumgebung

Übungen

Lösungen

Ohne funktionierende Entwicklungsumgebung (Editor, Browser, ...) kann man nicht programmieren. Testen!

Digitales Portfolio




Ihre Ergebnisse speichern Sie in Ihrem Home-Verzeichnis. Wie legt man diese am besten geordnet ab?

EVA-Prinzip

Übungen

Lösungen

Grundsätzliche Abläufe im Computer lassen sich leichter verstehen, wenn man dieses Ordnungsprinzip verstanden hat.

Fachbegriffe

Übungen

Lösungen

Ohne die Kenntnis von Fachbegriffen kommt man in der Programmierung nicht aus. Hier finden Sie die wichtigsten gebräuchlichen Fachausdrücke für Programmier-Anfänger.

Programmierrichtlinien

Übungen



Die Einhaltung von Programmierrichtlinien erleichtert Ihnen das Erlernen der Programmiersprache und das Finden eigener Fehler.

Variablen

Übungen

Lösungen

Beliebige Daten speichert ein Programmierer in sogenannten Variablen. Wie benutzt man sie?

Zeichenketten

Übungen

Lösungen

Zeichenketten bestehen aus beliebigen aufeinander folgenden Zeichen, welche z.B. über die Tastatur eingegeben werden.

Ausgaben

Übungen



Texte kann man auf verschiedene Weise im Browserfenster anzeigen.

Eingaben

Übungen

Lösungen

Das Lesen von Tastatureingaben wie z.B. Zeichenketten und Zahlen wird in vielen Programmen benötigt.

Umlaute und Sonderzeichen

Übungen

Lösungen

Die ersten Browser und Javascript wurden vor mehr als 20 Jahren in den USA entwickelt, d.h. mit Umlauten und Sonderzeichen gibt es Probleme, wenn man nicht aufpasst.

Rechnen

Übungen
Zaunbauer
Ohmsches Gesetz
Lösungen
Test

Die Rechenoperationen Addition, Subtraktion, Multiplikation und Division werden für kleine Rechnungen in Programmen benötigt.

Fehleranalyse

Übungen

Lösungen

Ihr Programm funktioniert nicht oder es passiert nicht das, was man erwartet. Wie geht man vor bei der Fehlersuche?

Kenntnisstufe B



Die Kenntnisstufe B ist eine wichtige Voraussetzung für die erfolgreiche Programmierung der Projekte im zweiten Halbjahr.

Vergleichsoperatoren

Übungen

Lösungen

Es kommt in Programmen oft vor, dass Variableninhalte mit anderen Texten und Zahlen verglichen werden müssen. Wie macht man das?
Wie vergleicht man Variablenwerte? Wie funktionieren logische Verknüpfungen?

Struktogramme

Übungen

Lösungen
Test

Struktogramme dienen der Darstellung einfacher Programmabläufe. Hier üben Sie die Darstellung von Programmabläufen in Form von Struktogrammen und umgekehrt.

Verzweigungen

Übungen
GeldautomatFahrkartenautomat

Lösungen
Test

Möchte man nach einer Eingabe (j/n) verschiedene Anweisungen ausführen (z.B. Berechnung oder Abbruch) so benötigt man im Programm Verzweigungen (if-/else) oder Mehrfachverzweigungen (switch).

Schleifen

Übungen
Ho ho ho hello world!
Bierkistenrückgabe
Blendenreihe
Pincracker

Lösungen
Zählschleife1
Zählschleife2

Für Wiederholungen von Anweisungen verwendet man Schleifen bzw. Wiederholungsanweisungen (for, while, do/while). Damit wird ein Programm flexibler und übersichtlicher.

Arbeitsprotokoll

Übungen





Zufallszahlen

Übungen
Zahlen-Ratespiel
Passwortgenerator
Mathelehrer

Lösungen

Zufallszahlen werden für viele Anwendungen benötigt

Syntax


Übungen

Lösungen

Fehlersuche auf Kenntnisstufe B

Halbjahrestest


Beispiel:
Farben raten
Aktienkurs
Kalenderblatt
Mengenvergleich
Das Team
Die Lösung der Aufgabe hat gegenüber den vorhergehenden Tests eine höhere Gewichtung. Siehe auch: Kapitel Bewertung auf dieser Seite weiter unten!





2. Halbjahr

Kenntnisstufe C



Die Beherrschung der Kenntnisstufe C ermöglicht das Schreiben gut strukturierter, schönerer Programme. Es handelt sich hier um wichtige Grundlagen für die Teamarbeit an größeren Programmen.

Arrays

Übungen
Wörter raten
Lottozahlen

Lösungen
Test1
Test2

Aufzählungen von gleichartigen Werten wie z.B. Tieren, Hauptstädten, Preisen usw. benötigen den Variablentyp Array; new Array(), Lesen und Schreiben von Array-Feldern

Funktionen

Übungen
Prozentuale Anteile
Dividendenrechner
Wörter raten
Sparplan
Schülerauswahl

Lösungen
Test

function() mit Übergabewerten (Parameter) und Rückgabewerten (return ...)

Formulare

Übungen
Passwortprüfung
IBAN-Generator
Umfrage
RGB-Hex Converter
Body Mass Index
Quadratische Gleichung

Lösungen

Test

Komfortable Eingaben beliebiger Daten können mit selbst gestalteten Formularen realisiert werden.

Eventhandler

Übungen
Fehlzeiten
Bewertung

Lösungen
Test

Eventhandler wie onclick(), onblur() und onload() werden z.B. in Formularen eingesetzt, bei Klicks und Mausbewegungen und nach dem Laden der HTML-Seite. Direkte Reaktionen auf derartige Ereignisse werden mit Eventhandlern ermöglicht.

PRAXISTEST A, B, C:




Beispiel:
Schülerauswahl
Währungsrechner
Überprüfung der Kompetenzen (Kenntnisstufe A,B,C) im Hinblick auf die in Kürze startende Arbeit an den Projekten.

Konzept

Übungen
Würfelspiele
Notenermittlung

Lösungen

Bevor mit der Entwicklung begonnen wird, benötigt man eine möglichst genaue Beschreibung der Anforderungen an ein Programm, z.B. Oberflächengestaltung, Reaktionen auf Eingaben, Hilfestellungen usw.

Kenntnisstufe D



Die Schüler sind in der Lage, selbstständig Anforderungen an ein gutes Programm zu stellen - entsprechend des Erlernten in den Kenntnisstufen A-C - und dieses anschließend zu programmieren und zu testen.

Objekte




Die objektorientierte Programmierung ermöglicht eine übersichtliche, strukturierte Programmierung und das Anlegen eines eigenen "Werkzeugkastens". Die Elemente einer HTML-Seite kann man als Objekte betrachten und behandeln.

Datum und Zeit

Übungen

Lösungen

Die aktuelle Uhrzeit oder den Tag auszugeben ist eine häufig anzutreffende Funktionalität auf Webseiten.

Timer

Übungen
Kopfrechnen
Diashow
Countdown
Digitale Stoppuhr
DAX Tick History

Lösungen
Test

Timer benötigt man, um z.B. die Uhrzeit jede Sekunde einmal neu auszugeben oder in einem Ratespiel die maximale Zeit vorzugeben usw.

Animierte GIFs




Spiele werden z.B. lebendiger, wenn der Beispiel der Schmetterling die Flügel bewegt.

Videos




Videos in eigene Seiten zu integrieren ist sehr beliebt. Mit Javascript hat man die Möglichkeit, eine Liste von Videos in Arrays zu sammeln. Man kann z.B. Funktionen realisieren, welche nach bestimmten Titeln in Arrays suchen, Titel hinzufügen oder löschen, Videos nacheinander abspielen etc. . Die Kenntnis der Nutzung eines Videoplayers im eigenen Programm ist hierbei von Vorteil.

Kenntnisstufe E



Themen, welche nicht Gegenstand des Unterrichts sind, sondern ggf. in den Projekten bei Bedarf und Interesse selbstständig erarbeitet werden müssen.

Was kann HTML 5?
(über das bereits Erlernte hinaus)




Dieses Thema vermittelt einen Überblick über die neuen Möglichkeiten in HTML5.

Scalable Vector_Graphics

siehe Beispiel
Variable Resistor.svg bzw.
https://www.mediaevent.de/svg-in-html-seiten/ bzw.
https://www.quora.com/How-do-I-learn-D3-js



Mit SVG kann man Vektorgrafiken erzeugen, welche im Gegensatz zu Images frei skalierbar sind und wenig Bandbreite beanspruchen.

Diagramme zeichnen

Übungen



Diagramme eignen sich sehr gut zur Visualisierung verschiedenster Zahlen und Mengen. Bei diesem Thema wird zugleich der Umgang mit externen Bibliotheken geübt.

Cookies




Speichern von Informationen ist auf verschiedene Arten möglich. Die bekannteste Variante sind die sogenannten Cookies.
Cookies werden von Webseiten genutzt, um Inhalte zu speichern, welche beim nächsten Besuch der Webseite noch vorhanden sind.

Sounds




Sie möchten z.B. in Ihrem Javascript-Spiel einen Sound erzeugen, sobald Sie auf die Seite klicken? Vielleicht eine Mücke als Cursor herumsirren lassen? Eine Fliegenklatsche klatschen lassen? Wie das geht, lernen Sie hier!

Drucken



Im Ausdruck einer HTML-Seite sind nur wesentliche Inhalte darzustellen.





3. Halbjahr

Kenntnisstufe F





jQuery

Übungen

Lösungen

Test

Verwendung von Bibliotheken am Beispiel jQuery


Programmieren für
verschiedene Browser




Das beste Javascript-Programm taugt nichts, wenn es nur in einem Browser läuft.

Tipps & Tricks




Sobald Sie die vorher gelisteten Themen bearbeitet und geübt haben, können Sie mit einem Projekt loslegen. Die hier gelisteten Tipps & Tricks können Ihnen helfen, Ihre Seite noch mit dem einen oder anderen Feature "aufzupeppen".

Ajax



Eine kleine Einführung - siehe z.B.
http://www.html-seminar.de/ajax-einfuehrung.htm
http://www.h-e-i.de/Was-ist-AJAX.html
https://de.wikipedia.org/wiki/Ajax_%28Programmierung%29
https://wiki.selfhtml.org/wiki/JavaScript/Ajax
http://www.torbenleuschner.de/blog/293/ajax-total-1-was-ist-ajax-eigentlich/
https://www.youtube.com/watch?v=OI0_c5o51gE
http://www.akademie.de/wissen/was-ist-ajax






Bootstrap http://getbootstrap.com/



Zitat: "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web."

Github



Zitat: "Millions of developers use GitHub to build personal projects, support their businesses, and work together on open source technologies."

lessCSS http://lesscss.org/



CSS pre-processor
Projekte
(Programmierung für Fortgeschrittene, hohe Anforderungen)
Am Ende des Jahres programmiert jeder Schüler bzw. jede Schülerin ein kleines Projekt.
Beispiele:

Andere Quellen zum Erlernen von Javascript im Internet
Im Netz gibt es sehr viele Quellen zum Erlernen von Javascript.
Da muss man einfach nur ein wenig suchen und lernen!
Hier gibt es z.B. einen Schnellkurs als Video ...
Es gibt auch Seiten, welche Sie beim schnellen Ausprobieren eigener Ideen unterstützen:


Bewertung

Allgemein

  • Im Unterricht vermittelte Programmierkenntnisse bauen aufeinander auf. Die Lösung nachfolgender Aufgaben erfordert jeweils die Kenntnis der vorhergehenden Übungen. Verpasste Unterrichtsinhalte sind selbstständig entsprechend des auf dieser Seite bereitgestellten Unterrichtsmaterials nachzuarbeiten.
  • Begleitend zum Unterricht werden kontinuierlich Tests durchgeführt. Die Summe der Noten geteilt durch die Anzahl der Tests ergibt jeweils die verdiente Halbjahresnote.
  • Der folgende Schlüssel kommt in jedem Test zur Anwendung:
Note
1
2
3
4
5
6
Prozent
>=85
>=70
>=55
>=45
>=9
>=0
Merke:
  • Entschuldigtes Fehlen berechtigt zum Nachschreiben der geschriebenen Tests.
  • Unentschuldigtes Fehlen und Nicht-Nachschreiben führt zu einer Benotung des betreffenden Tests mit der Note 6.
  • Fehlzeiten sind entsprechend geltender Vorschriften der Schule zu belegen (z.B. mit einem ärztlichen Attest).
  • Im Zweifelsfall kommt - aufgrund der aufeinander aufbauenden und voneinander abhängigen Übungen - den in späteren Tests erzielten Ergebnissen eine höhere Gewichtung zu, d.h. die Tendenz der Notenentwicklung über die Zeit wird berücksichtigt! Die Gesamtnote wird entsprechend ermittelt.

1. Halbjahr

Die zu erreichenden Kenntnisstufen A,B,C und D bauen aufeinander auf! Nehmen Sie die gestellten Aufgaben ernst und üben Sie fleissig! Das Ausbildungsziel ist erreicht, wenn am Ende des ersten Halbjahres die Kenntnisstufen A und B nachgewiesen werden. Wer am Ende des ersten Halbjahres die Kenntnisstufe A nicht "im Schlaf" beherrscht, hat mit Sicherheit kein "ausreichend" im Zeugnis! Fehlende Kenntnisse (z.B. wegen Fehlen im Unterricht) sind jeweils selbstständig unaufgefordert nachzuarbeiten.

2. Halbjahr

Die im zweiten Halbjahr individuell zu programmierenden Aufgaben erfordern minimal die in den Kenntnisstufen A, B und C vermittelten Kompetenzen. Diese Kenntnisse sind in jedem Fall vor Projektstart zu erarbeiten. Es findet ein Eignungstest vor dem Projektstart statt, der die Kenntnis der Stufen A, B und C abprüft. Das Nicht-Bestehen des Eignungstests entspricht der Note 5 oder schlechter im nachfolgenden Halbjahreszeugnis. Es ist in diesen Fällen mit Sicherheit davon auszugehen, dass die eigenständige Bearbeitung eines kleinen Projekts in ausreichender Qualität nicht möglich ist.
Die Projektzeit kann von Schülern - welche den Test nicht bestehen - zur Erarbeitung der Kenntnisstufen A, B und C genutzt werden. Mit einem letzten Test der Kenntnisstufen A, B und C am Ende des Halbjahres wird der Kompetenzstand bei den leistungsschwachen Schülern noch einmal überprüft und damit ggf. festgestellt, ob die erarbeitete Note noch ein "ausreichend" ist.

Weitere Hinweise zum Erzielen einer sehr guten Note