- Allgemeines über JavaScript
- Das HTML-Grundgerüst
- <script> Element
- <noscript> Element
- Eine Vorlage erstellen
- L010_Start.pdf

- windows.alert();
- document.write();
- .innerHTML
- console.log();
- L020_Ausgabe.pdf

- Was ist eine Variable?
- Variablen instanziieren var
- Wertzuweisungen
- Konstanten mit const
- Einzeilige Kommentare
- Mehrzeilige Kommentare
- L030_Variablen.pdf

- Rangfolge der Operatoren
- Rechenoperatoren (+, -, *, /, %)
- Beispiel Umsatzsteuer
- Textverkettung mit +
- Standard-Objekt Math.
- Methoden von Math. (Potenz, usw.)
- Beispiel: Flächeninhalt
- L040_Operatoren.pdf

- Übung A: Variablentypen
- Übung B: Fahrenheit und Celsius
- Übung C: Mitternachtsformel
- U040_Operatoren.pdf

- Was ist eine Funktion?
- Syntax einer Funktion
- Wertübergaben
- onClick Attribut
- Schreibweise von Anführungszeichen
- Eigene Runden Funktion
- Funktionsaufruf über var
- L050_Funktionen.pdf

- Eingabemöglichkeiten
- EVA Prinzip
- window.prompt();
- Zeilenschaltung mit \n
- getElementByID().value;
- L060_Eingabe.pdf

- Was sind event attributes?
- Window Event Attributes
- Beispiel: Viewport-Höhe
- Form Events
- Keyboard Events
- Mouse Events
- Beispiel: Lesbares Passwort
- L061_Event.pdf

- Übung A: Pythagoras
- Übung B: Zinseszins
- Übung C: Deltoid
- U060_Eingabe.pdf

- Was ist eine Verzweigung?
- if-else Syntax
- Vergleichsoperatoren
- Beispiel: Größere Zahl ermitteln
- Logische Operatoren UND ODER
- L070_Verzweigung.pdf

- switch case Syntax
- Beispiel: Produktionsstätten
- Info: globale Variablen
- L071_switch.pdf

- Infos zu Radiobuttons
- Übung B: Rabattberechnung
- Übung C: Systemvoraussetzungen
- U070_Verzweigung.pdf

- Übung A: Postleitzahl
- Übung B: Gegenüberstellung
- U071_switch.pdf

- Was ist eine Schleife?
- Kopfgesteuerte Schleifen
- Zähler i++;
- Fussgesteuerte Schleifen
- Achtung: Endlosschleife
- L080_Schleifen.pdf

- Was ist eine for Schleife?
- Syntax der for Schleife
- Beispiel: Schriftgröße
- Beispiel: Buchstabe für Buchstabe
- Ausblick: for in und Arrays
- L081_Schleifen.pdf

- Übung A: Geschlecht eingeben
- Übung B: Die drei Schleifen
- Übung C: Primzahlen
- Übung D: Quadratische Funktion
- U081_Schleifen.pdf

- Was ist ein Array (Feld)?
- Ein Array vereinbaren
- Werte anzeigen und verändern
- Die .length Eigenschaft
- L090_Arrays.pdf

- .unshift()
- .shift()
- .push()
- .pop()
- .splice()
- .join()
- typeof(var)
- L091_Arrays.pdf

- .sort()
- .reverse()
- Zahlen sortieren
- .forEach()
- for...in Schleife
- L092_Arrays.pdf

- Übung A: Österreichische Offiziere
- Übung B: Österreichische Offiziere II
- U090_Arrays.pdf

- Übung A: Mittelwert
- Übung B: Wettkampf
- Übung C: Buchstaben zählen
- U092_Arrays.pdf

- Position ermitteln
- .indexOf()
- Text ausschneiden
- .slice() und .substr()
- UTF-16 Code ermitteln
- .charCodeAt()
- String.fromCharCode()
- L100_TextOP.pdf

- Textteile ersetzen
  .replace()
- Groß- und Kleinbuchstaben
  .toUpperCase() und .toLowerCase()
- Leerzeichen entfernen
  .trim()
- String in ein Array splitten
  .split()
- L101_StringMethoden.pdf

- Datum Objekt
  new Date()
- Deutsche Schreibweise
  .toLocaleString('de-DE')
- bestimmtes Datum definieren
  .trim()
- Millisekunden ermitteln
  .getTime()
- L102_Datum.pdf

- Übung A: E-Mail-Adresse
- Übung B: UTF-16 Code
- Übung C: Kryptographie
- U100_TextOP.pdf

- Übung A: HTML Zeichenreferenz
- Übung B: Suche mit JS
- Übung C: IBAN Validierung
- U101_String.pdf

- Element.style Syntax
- CamelCase für CSS Eigenschaften
- Best Pracitce
- L110_style.pdf

- Element.style als Objekt
- Eventattribute mit (this)
  selbstreferenzierend
- Beispiel: Fokus und Verlassen
- L111_styleObjekt.pdf

- querySelector() Methode
- Selektieren von
  HTML Elementen
  Klassen
  ID's
  Attribute
- querySelectorAll() Methode
- Alle über eine Schleife auswählen
- L112_Selektoren.pdf

- .setAttribute() Methode
- Hinzufügen von Attributen
- .getAttribute() Methode
- Wert eines Attribut auslesen
- .removeAttribute() Methode
- Attribut löschen
- .hasAttribute() Methode
- L113_setAttribute.pdf

- Übung A: Heute
- Übung B: Lesegeschwindigkeit
- U111_styleObjekt.pdf

- Übung A: Schriftgröße ändern
- Übung B: Englisch
- Übung C: Englisch
- Übung D: Pflichtfelder anzeigen
- Übung E: Erweiterungen
- U113_setAttribute.pdf

- Document Object Model
- Verwandtschaften
- L120_Nodes.pdf

- Nodes (Knoten)
- Hinzufügen von neuen Elementen
- .createElement()
- .createTextNode()
- .appendChild()
- .insertBefore()
- Neuer Eintrag in einer Aufzählung
- Attribut hinzufügen
- .createAttribute
- .setAttributeNode
- L121_Nodes.pdf

- Nodes (Knoten)
- Ersetzen durch neue Elemente
- .replaceChild()
- L122_Nodes.pdf

- Nodes (Knoten)
- Entfernen von Elementen
- .removeChild()
- Elternelement selektieren
- .parentNode
- L123_Nodes.pdf

- Nodelist
- .childNodes
- Was ist ein Whitespace?
- Hinzufügen eines Knoten
- .appendChild()
- Nodelist als Array
- Weitere Knoteneingenschaften
- .firstChild, .nextSibling usw.
- L124_Nodes.pdf

- Übung A: Verwandtschaft
- Übung B: Baumstruktur
- U120_Nodes.pdf

- Übung A: Einkaufsliste
- Übung B: Personenliste Plus
- Übung C: Personenliste Minus
- U124_Nodes.pdf

- document Objekt
- Methoden und Eigenschaften
- document.URL
- document.domain
- document.characterSet
- document.title
- document.hasFocus()
- document.readyState
- document.designMode
- L131_document.pdf

- Timer
- setInterval() Methode
- clearInterval() Methode
- setTimeout() Methode
- L132_Timer.pdf

- Übung A: Ladezeit
- Übung B: Countdown
- Übung C: Schreibmaschinen-Effekt
- U132_Timer.pdf

- Das Window Objekt
- Fenstergröße
- .innerHeight, .innerWidth
- Window Methoden
- confirm(), prompt()
- open(), print()
- Base 64 Kodierung
- .btoa(), .atob()
- L140_Window.pdf

- Pop-Up (Fenster)
- window.open() Methode
- Name von .open()
- Features von .open()
- window.close() Methode
- L141_popup.pdf

- Fenster bewegen
- .moveTo(x, y)
- .moveBy(x, y)
- Fenstergröße verändern
- .resizeBy(Breite, Höhe)
- .resizeTo(Breite, Höhe)
- CSS Stiel Werte ermittlen
- .getComputedStyle();
- .getPropertyValue();
- L142_Window.pdf

- Scrollposition mit pageOffset
- Ermittlung der Scrollposition
- window.pageYOffset
- window.pageXOffset
- Zu einer Position scrollen
- window.scrollBy(x, y)
- window.scrollTo(x, y)
- Position eines Elements ermitteln
- .offsetTop;
- L143_pageOffset.pdf

- Übung A: Seitenlayout
- Übung B: dynamisches Seitenlayout
- Übung C: En- und Decodieren
- Übung D: Duden.de
- U140_Window.pdf

- Übung A: Open Street Map
- Übung B: Linkliste
- Übung C: Linkliste erweitert
- U141_popup.pdf

- Übung A: Scrollen
- Übung B: Inhaltsverzeichnis
- Übung C: Rauf und runter
- U143_pageOffset.pdf

- window.navigator
- Navigator Eigenschaften
- .language Beispiel
- Info: .geolocation
- .plugins
- L151_Navigator.pdf

- window.location
- Aufbau einer URL
- Location Eigenschaftn
- .href, .protocol, .hostname, .port
- .pathname, .search, .hash
- Location Methoden
- .reload(), .replace(), .assign()
- History Methoden
- history.back(), .forward(), .go()
- L152_Location.pdf

- Wertübbergabe mit GET
- Formular (method="GET")
- Auswertung der URL
- unescape();
- Auswertung mit URLSearchParams
- L153_WertuebergabeGET.pdf

- Web Storage API
- .sessionStorage
- .localStorage
- Methoden
- .setItem(); .getItem(); removeItem(); clear();
- Ein Array speichern und abrufen
- JSON.stringif();
- JSON.parse();
- L154_localStorage.pdf

- Über Cookies
- navigator.cookieEnabled;
- Cookies erstellen bzw. speichern
- Maximales Alter und Ablaufdatum
- max-age=, expire=
- Cookies lesen
- Cookies löschen
- L155_Cookies.pdf

- Übung A: Browser Informationen
- Übung B: Error Docs
- U152_Location.pdf

- Übung A: Google Suche
- Übung B: URL Analyse
- Übung C: Bücher Tauschbörse
- U153_Wertuebergabe.pdf

- Übung A: Besuchzähler
- Übung B: Datum
- Übung C: Einkaufsplan
- U154_localStorage.pdf

- Übung A: Datenschutzverordnung
- Übung B: Cookie OK
- Übung C: Gescrollt
- U155_Cookies.pdf

- Events dynamisch vergeben
- .addEventListener
- Event entfernen
- .removeEventListener
- Druck/Print Events
- afterprint, beforeprint
- Zwischenablagen Events
- copy, cut, paste
- L161_Eventlistener.pdf

- Keyboards Events
- Dynamisch oder im HTML
- onkeydown
- onkeyup
- onkeypress
- Wertübergabe mit event
- event.key
- Code Eigenschaften
- event.keyCode
- Weitere Code Eigenschaften
- event.charCode, event.which
- Cross-Browser-Solution
- L162_Keyboardevents.pdf

- Mouse Event Typen
- click
- dblclick
- contextmenu
- mouseenter
- mouseleave
- mousemove
- L163_Mouseevents.pdf

- Mouse Event Eigenschaften
- Maustasten ermitteln
- .buttons (.button, .which)
- onMouseDown Attribut
- Position des Mauszeigers
- .offsetX, .offsetY
- .pageX, .pageY
- .screenX, .screenY
- .clientX, .clientY
- Funktionstasten
- .altKey, .ctrlKey, .shiftKey
- L164_Mouseeigenschaften.pdf

- Touch Events
- touchstart, touchmove
- touchend, touchcancel
- Touch Event Eigenschaften
- .targetToches
- Beispiel: Anzahl der Finger
- .touches
- Beispiel: Koordinaten
- L165_Touchevents.pdf

- Übung A: Energieklassen
- Übung B: Energieklassen II
- U161_Eventlistener.pdf

- Übung A: Wordpress Suche
- Übung B: Schriftgröße
- Übung C: Tetris
- U162_Keyboardevents.pdf

- Übung A: Navigation
- Übung B: Fadenkreuz
- Übung C: Color Picker
- U164_Mouseeigenschaften.pdf

- Audio HTML Element
- Audio mit JS eingebunden
- .src Eigenschaft
- .play() Methode
- .pause() Methode
- Audio Eigenschaften
- .currentSrc
- .loop
- .muted
- .volume
- .currentTime
- .controls
- .duration
- L171_Audio.pdf

- Video HTML Element
- .load() Methode
- .canPlayType() Methode
- Video Typen und Codecs
- .preload Eigenschaft
- L172_Video.pdf

- AV-Events
- loadstart
- progress
- canplay
- waiting
- playing
- seeked
- Beispiel: seeked
- L173_AV-Events.pdf

- Übung A: Europa
- Übung B: SoundDesign
- Übung C: MP3 Player
- U171_Audio.pdf

- Über Canvas
- Zeichnen mit JavaScript
- Koorinaten-Ursprung
- Canvas HTML-Element
- .getContext('2D')
- Rechteck hinzufügen
- .rect()
- .lineWidth, .strokeStyle
- .stroke()
- Hintergrundfarbe
- .fillStyle
- .fill();
- Farbverlauf
- .createLinearGradient()
- L181_Canvas.pdf

- Einen Pfad zeichnen
- .beginPath()
- Referenzpunkt
- .moveTo(x,y)
- Linie festlegen
- .lineTo(x,y)
- Pfad schließen
- .closePath()
- Pfad mit Frabe füllen
- Weitere Methoden
- .save(), .restore(); .clip();
- .isPointInPath(x,y)
- L182_Canvas.pdf

- Umriss-Text hinzufügen
- .strokeText() Methode
- Text mit Füllung
- .fillText() Methode
- Bild darstellen
- .drawImage() Methode
- L183_Canvas.pdf

- Übung A: Olympische Ringe
- Übung B: Koordinatensystem
- U183_Canvas.pdf

- Geolocation API
- Wie wird die Postion ermittelt?
- Datenschutz und Sicherheit
- .getCurrentPosition()
- .coords. Eigenschaften
- Error Handler (Fehler)
- L191_Geolocation.pdf

- Übung A: Berg-App
- Übung B: Online Karte auf der Berg-App
- U191_Geolocation.pdf

- Objektorientiertes Programmieren
- Einführung
- Objekt mit new vereinbaren
- Objekteigenschaften festlegen
- Zugriff auf Objekteigenschaften
- Objektmethoden festlegen
- Aufruf von Objektmethoden
- L201_OOP.pdf

- Alternative Schreibweise im OOP
- this
- Ein Array im Objekt
- L202_OOP.pdf

- Was ist ein Konstruktor?
- Aufbau einer Konstruktorfunktion (this)
- Vereinbarung eines Objekts (new)
- .prototype
- Vererbung
- L203_OOP.pdf

- Was ist JSON?
- Nutzung von JSON
- Unterstützte Dateitypen
- JSON.stringify()
- JSON.parse()
- L204_JSON.pdf

- Übung A: Anhalteweg
- Übung B: OOP Präsentation
- U203_OOP.pdf

- Projektplanung
- Thema und Arbeitstitel
- Beschreibung
- Ziele
- Aufgaben
- Projektphasen
- Ressourcen
- Projektfertigstellung
- Prozessdokumentation
- Zeiterfassung
- Aufstellung der Mittel
- Soll-Ist-Vergleich
- Quellenverzeichnis
- Read-Me File
- How-To Dokument
- Rechtliches
- Kennzeichnung
- Urheberrecht
- Datenschutz
- L211_Projekte.pdf

- Projekt A: Kryptografie
- Projekt B: Alphanummerisches Sortieren
- Projekt C: Ampelanlage
- Projekt D: Triangulation
- Projekt E: Kurvendiskussion
- Projekt F: Suchfunktion
- Projekt G: Navigation mit Sitemap
- Projekt H: Freies Projekt
- U211_Projekte.pdf

- Projekt A: Bezugs- und Absatzkalkulation
- Projekt B: Direct Costing
- Projekt C: Anlageverzeichnis
- Projekt D: Rechnungsgenerator
- Projekt E: Einkommensteuer
- Projekt F: Lohn- und Gehaltsrechnung
- Projekt G: Betriebliche Kennzahlen
- Projekt H: Freies Projekt
- U212_Projekte.pdf

- Projekt A: Medienplayer
- Projekt B: Schiffe versenken
- Projekt C: Mastermind
- Projekt D: Würfelpoker
- Projekt E: Wissens-Quiz
- Projekt F: Ein Brettspiel
- Projekt G: Ein Kartenspiel
- Projekt H: Freies Projekt
- U213_Projekte.pdf