JavaScript
1.0 - EinführungHTML | CSS | JS
- Refcode: JSL010
- Allgemeines über JavaScript
- Das HTML-Grundgerüst
- <script> Element
- <noscript> Element
- Eine Vorlage erstellen
- Lernhandout
- Codebeispiel
2.0 - Ausgabe im BrowserHTML | JS
3.0 - VariablenJS
- Refcode: JSL030
- Was ist eine Variable?
- Variablen instanziieren var
- Wertzuweisungen
- Konstanten mit const
- Einzeilige Kommentare
- Mehrzeilige Kommentare
- Lernhandout
- Codebeispiel
4.0 - RechenoperatorenJS
- Refcode: JSL040
- Rangfolge der Operatoren
- Rechenoperatoren (+, -, *, /, %)
- Beispiel Umsatzsteuer
- Textverkettung mit +
- Standard-Objekt Math.
- Methoden von Math. (Potenz, usw.)
- Beispiel: Flächeninhalt
- Lernhandout
- Codebeispiel
Ü 4.0 - OperatorenJS
- Refcode: JSU040
- Übung A: Variablentypen
- Übung B: Fahrenheit und Celsius
- Übung C: Mitternachtsformel
- Übungsblatt
5.0 - FunktionenJS
- Refcode: JSL050
- Was ist eine Funktion?
- Syntax einer Funktion
- Wertübergaben
- onClick Attribut
- Schreibweise von Anführungszeichen
- Eigene Runden Funktion
- Funktionsaufruf über var
- Lernhandout
- Codebeispiel
6.0 - EingabenHTML | JS
- Refcode: JSL060
- Eingabemöglichkeiten
- EVA Prinzip
- window.prompt();
- Zeilenschaltung mit \n
- getElementByID().value;
- Lernhandout
- Codebeispiel
6.1 - Ereignis AttributeHTML | JS
- Refcode: JSL061
- Was sind event attributes?
- Window Event Attributes
- Beispiel: Viewport-Höhe
- Form Events
- Keyboard Events
- Mouse Events
- Beispiel: Lesbares Passwort
- Lernhandout
- Codebeispiel
Ü 6.0 - EingabeJS
- Refcode: JSU060
- Übung A: Pythagoras
- Übung B: Zinseszins
- Übung C: Deltoid
- Übungsblatt
7.0 - VerzweigungJS
- Refcode: JSL070
- Was ist eine Verzweigung?
- if-else Syntax
- Vergleichsoperatoren
- Beispiel: Größere Zahl ermitteln
- Logische Operatoren UND ODER
- Lernhandout
- Codebeispiel
7.1 - switch caseHTML | JS
Ü 7.0 - VerzweigungHTML | CSS | JS
- Refcode: JSU070
- Übung A: Frau oder Mann
- Infos zu Radiobuttons
- Übung B: Rabattberechnung
- Übung C: Systemvoraussetzungen
- Übungsblatt
Ü 7.1 - switch caseHTML | CSS | JS
- Refcode: JSU071
- Übung A: Postleitzahl
- Übung B: Gegenüberstellung
- Übungsblatt
8.0 - while SchleifenHTML | JS
- Refcode: JSL080
- Was ist eine Schleife?
- Kopfgesteuerte Schleifen
- Zähler i++;
- Fussgesteuerte Schleifen
- break;
- Achtung: Endlosschleife
- Lernhandout
- Codebeispiel
8.1 - for SchleifenHTML | CSS | JS
- Refcode: JSL081
- Was ist eine for Schleife?
- Syntax der for Schleife
- Beispiel: Schriftgröße
- Beispiel: Buchstabe für Buchstabe
- Ausblick: for in und Arrays
- Lernhandout
- Codebeispiel
Ü 8.1 - SchleifenHTML | CSS | JS
- Refcode: JSU081
- Übung A: Geschlecht eingeben
- Übung B: Die drei Schleifen
- Übung C: Primzahlen
- Übung D: Quadratische Funktion
- Übungsblatt
9.0 - ArraysHTML | JS
- Refcode: JSL090
- Was ist ein Array (Feld)?
- Ein Array vereinbaren
- Werte anzeigen und verändern
- Die .length Eigenschaft
- Lernhandout
- Codebeispiel
9.1 - Array MethodenJS
9.2 - Arrays sortierenJS
Ü 9.0 - ArraysHTML | CSS | JS
Ü 9.2 - Arrays sortierenHTML | CSS | JS
- Refcode: JSU092
- Übung A: Mittelwert
- Übung B: Wettkampf
- Übung C: Buchstaben zählen
- Übungsblatt
10.0 - Text OperationenJS
- Refcode: JSL100
- Position ermitteln
- .indexOf()
- Text ausschneiden
- .slice() und .substr()
- UTF-16 Code ermitteln
- .charCodeAt()
- String.fromCharCode()
- Lernhandout
- Codebeispiel
10.1 - String MethodenJS
- Refcode: JSL101
- Textteile ersetzen
.replace()
- Groß- und Kleinbuchstaben
.toUpperCase() und .toLowerCase()
- Leerzeichen entfernen
.trim()
- String in ein Array splitten
.split()
- Lernhandout
- Codebeispiel
10.2 - DatumHTML | JS
- Refcode: JSL102
- Datum Objekt
new Date()
- Deutsche Schreibweise
.toLocaleString('de-DE')
- bestimmtes Datum definieren
.trim()
- Millisekunden ermitteln
.getTime()
- Lernhandout
- Codebeispiel
Ü 10.0 - Text OperationenALL
- Refcode: JSU100
- Übung A: E-Mail-Adresse
- Übung B: UTF-16 Code
- Übung C: Kryptographie
- Übungsblatt
Ü 10.1 - String MethodenALL
11.0 - .styleHTML | CSS | JS
11.1 - .style ObjektHTML | CSS | JS
- Refcode: JSL111
- Element.style als Objekt
- Eventattribute mit (this)
selbstreferenzierend
- Beispiel: Fokus und Verlassen
- Lernhandout
- Codebeispiel
11.2 - SelektorenHTML | CSS | JS
- Refcode: JSL112
- querySelector() Methode
- Selektieren von
HTML Elementen
Klassen
ID's
Attribute
- querySelectorAll() Methode
- Alle über eine Schleife auswählen
- Lernhandout
- Codebeispiel
11.3 - .setAttributeHTML | CSS | JS
- Refcode: JSL113
- .setAttribute() Methode
- Hinzufügen von Attributen
- .getAttribute() Methode
- Wert eines Attribut auslesen
- .removeAttribute() Methode
- Attribut löschen
- .hasAttribute() Methode
- Lernhandout
- Codebeispiel
Ü 11.1 - .style ObjektALL
- Refcode: JSU111
- Übung A: Heute
- Übung B: Lesegeschwindigkeit
- Übungsblatt
Ü 11.3 - .setAttributeALL
- Refcode: JSU113
- Übung A: Schriftgröße ändern
- Übung B: Englisch
- Übung C: Englisch
- Übung D: Pflichtfelder anzeigen
- Übung E: Erweiterungen
- Übungsblatt
- Registrierung.html
12.0 - Nodes im DOMHTML | JS
12.1 - Nodes einfügenHTML | JS
- Refcode: JSL121
- Nodes (Knoten)
- Hinzufügen von neuen Elementen
- .createElement()
- .createTextNode()
- .appendChild()
- .insertBefore()
- Neuer Eintrag in einer Aufzählung
- Attribut hinzufügen
- .createAttribute
- .setAttributeNode
- Lernhandout
- Codebeispiel
12.2 - Nodes ersetzenHTML | CSS | JS
12.3 - Nodes entfernenHTML | JS
- Refcode: JSL123
- Nodes (Knoten)
- Entfernen von Elementen
- .removeChild()
- Elternelement selektieren
- .parentNode
- Lernhandout
- Codebeispiel
12.4 - NodelistHTML | JS
- Refcode: JSL124
- Nodelist
- .childNodes
- Was ist ein Whitespace?
- Hinzufügen eines Knoten
- .appendChild()
- Nodelist als Array
- Weitere Knoteneingenschaften
- .firstChild, .nextSibling usw.
- Lernhandout
- Codebeispiel
Ü 12.0 - Nodes im DOMHTML | JS
- Refcode: JSU120
- Übung A: Verwandtschaft
- Übung B: Baumstruktur
- Übungsblatt
Ü 12.4 - NodelistALL
- Refcode: JSU124
- Übung A: Einkaufsliste
- Übung B: Personenliste Plus
- Übung C: Personenliste Minus
- Übungsblatt
13.1 - documentHTML | JS
- Refcode: JSL131
- document Objekt
- Methoden und Eigenschaften
- document.URL
- document.domain
- document.characterSet
- document.title
- document.hasFocus()
- document.readyState
- document.designMode
- Lernhandout
- Codebeispiel
13.2 - TimerHTML | JS
Ü 13.2 - TimerALL
- Refcode: JSU132
- Übung A: Ladezeit
- Übung B: Countdown
- Übung C: Schreibmaschinen-Effekt
- Übungsblatt
14.0 - Window ObjektHTML | JS
- Refcode: JSL140
- Das Window Objekt
- Fenstergröße
- .innerHeight, .innerWidth
- Window Methoden
- confirm(), prompt()
- open(), print()
- Base 64 Kodierung
- .btoa(), .atob()
- Lernhandout
- Codebeispiel
14.1 - Pop-Up WindowHTML | JS
- Refcode: JSL141
- Pop-Up (Fenster)
- window.open() Methode
- Name von .open()
- Features von .open()
- window.close() Methode
- Lernhandout
- Codebeispiel
14.2 - Window MethodenAll
- Refcode: JSL142
- 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();
- Lernhandout
- Codebeispiel
14.3 - pageOffsetHTML | CSS | JS
- Refcode: JSL143
- 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;
- Lernhandout
- Codebeispiel
Ü 14.0 - Window ObjektALL
- Refcode: JSU140
- Übung A: Seitenlayout
- Übung B: dynamisches Seitenlayout
- Übung C: En- und Decodieren
- Übung D: Duden.de
- Übungsblatt
Ü 14.1 - Pop-Up WindowALL
Ü 14.3 - pageOffsetALL
15.1 - NavigatorHTML | JS
- Refcode: JSL151
- window.navigator
- Navigator Eigenschaften
- .language Beispiel
- Info: .geolocation
- .plugins
- Lernhandout
- Codebeispiel
15.2 - LocationJS
- Refcode: JSL152
- 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()
- Lernhandout
- Codebeispiel
15.3 - Wertübergabe GETHTML | JS
- Refcode: JSL153
- Wertübbergabe mit GET
- Formular (method="GET")
- Auswertung der URL
- unescape();
- Auswertung mit URLSearchParams
- Lernhandout
- Codebeispiel
15.4 - localStorageJS
- Refcode: JSL154
- Web Storage API
- .sessionStorage
- .localStorage
- Methoden
- .setItem(); .getItem(); removeItem(); clear();
- Ein Array speichern und abrufen
- JSON.stringif();
- JSON.parse();
- Lernhandout
- Codebeispiel
15.5 - CookiesJS
- Refcode: JSL155
- Über Cookies
- navigator.cookieEnabled;
- Cookies erstellen bzw. speichern
- Maximales Alter und Ablaufdatum
- max-age=, expire=
- Cookies lesen
- Cookies löschen
- Lernhandout
- Codebeispiel
Ü 15.2 - LocationALL
- Refcode: JSU152
- Übung A: Browser Informationen
- Übung B: Error Docs
- Übungsblatt
Ü 15.3 - Wertübergabe GETALL
- Refcode: JSU153
- Übung A: Google Suche
- Übung B: URL Analyse
- Übung C: Bücher Tauschbörse
- Übungsblatt
Ü 15.4 - localStorageALL
- Refcode: JSU154
- Übung A: Besuchzähler
- Übung B: Datum
- Übung C: Einkaufsplan
- Übungsblatt
Ü 15.5 - CookiesALL
- Refcode: JSU155
- Übung A: Datenschutzverordnung
- Übung B: Cookie OK
- Übung C: Gescrollt
- Übungsblatt
16.1 - EventListenerHTML | JS
- Refcode: JSL161
- Events dynamisch vergeben
- .addEventListener
- Event entfernen
- .removeEventListener
- Druck/Print Events
- afterprint, beforeprint
- Zwischenablagen Events
- copy, cut, paste
- Lernhandout
- Codebeispiel
16.2 - Keyboard EventsHTML | JS
- Refcode: JSL162
- 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
- Lernhandout
- Codebeispiel
16.3 - Mouse Event TypenHTML | JS
- Refcode: JSL163
- Mouse Event Typen
- click
- dblclick
- contextmenu
- mouseenter
- mouseleave
- mousemove
- Lernhandout
- Codebeispiel
16.4 - Mouse EigenschaftenHTML | JS
- Refcode: JSL164
- 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
- Lernhandout
- Codebeispiel
16.5 - Touch EventsHTML | JS
- Refcode: JSL165
- Touch Events
- touchstart, touchmove
- touchend, touchcancel
- Touch Event Eigenschaften
- .targetToches
- Beispiel: Anzahl der Finger
- .touches
- Beispiel: Koordinaten
- Lernhandout
- Codebeispiel
Ü 16.1 - EventlistenerAll
- Refcode: JSU161
- Übung A: Energieklassen
- Übung B: Energieklassen II
- Übungsblatt
Ü 16.2 - Keyboard EventsAll
- Refcode: JSU162
- Übung A: Wordpress Suche
- Übung B: Schriftgröße
- Übung C: Tetris
- Übungsblatt
Ü 16.4 - Mouse EigenschaftenAll
- Refcode: JSU164
- Übung A: Navigation
- Übung B: Fadenkreuz
- Übung C: Color Picker
- Übungsblatt
17.1 - AudioHTML | JS
- Refcode: JSL171
- Audio HTML Element
- Audio mit JS eingebunden
- .src Eigenschaft
- .play() Methode
- .pause() Methode
- Audio Eigenschaften
- .currentSrc
- .loop
- .muted
- .volume
- .currentTime
- .controls
- .duration
- Lernhandout
- Europahynmne.mp3
- Codebeispiel
17.2 - VideoHTML | JS
17.3 - Audio|Video EventsHTML | JS
Ü 17.1 - AudioAll
- Refcode: JSU171
- Übung A: Europa
- Übung B: SoundDesign
- Übung C: MP3 Player
- Übungsblatt
18.1 - CanvasHTML | JS
- Refcode: JSL181
- Über Canvas
- Zeichnen mit JavaScript
- Koorinaten-Ursprung
- Canvas HTML-Element
- .getContext('2D')
- Rechteck hinzufügen
- .rect()
- .lineWidth, .strokeStyle
- .stroke()
- Hintergrundfarbe
- .fillStyle
- .fill();
- Farbverlauf
- .createLinearGradient()
- Lernhandout
- Codebeispiel
18.2 - Canvas PfadeHTML | JS
- Refcode: JSL182
- 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)
- Lernhandout
- Codebeispiel
18.3 - Canvas Text & BildHTML | JS
- Refcode: JSL183
- Umriss-Text hinzufügen
- .strokeText() Methode
- Text mit Füllung
- .fillText() Methode
- Bild darstellen
- .drawImage() Methode
- Lernhandout
- Codebeispiel
Ü 18.3 - CanvasAll
- Refcode: JSU183
- Übung A: Olympische Ringe
- Übung B: Koordinatensystem
- Übungsblatt
19.1 - GeolocationJS
- Refcode: JSL191
- Geolocation API
- Wie wird die Postion ermittelt?
- Datenschutz und Sicherheit
- .getCurrentPosition()
- .coords. Eigenschaften
- Error Handler (Fehler)
- Lernhandout
- Codebeispiel
Ü 19.1 - GeoloactionAll
- Refcode: JSU191
- Übung A: Berg-App
- Übung B: Online Karte auf der Berg-App
- Übungsblatt
20.1 - OOP EinführungJS
- Refcode: JSL201
- Objektorientiertes Programmieren
- Einführung
- Objekt mit new vereinbaren
- Objekteigenschaften festlegen
- Zugriff auf Objekteigenschaften
- Objektmethoden festlegen
- Aufruf von Objektmethoden
- Lernhandout
- Codebeispiel
20.2 - OOP LiteraleJS
20.3 - OOP KonstruktorJS
- Refcode: JSL203
- Was ist ein Konstruktor?
- Aufbau einer Konstruktorfunktion (this)
- Vereinbarung eines Objekts (new)
- .prototype
- Vererbung
- Lernhandout
- Codebeispiel
20.4 - JSONJS
- Refcode: JSL204
- Was ist JSON?
- Nutzung von JSON
- Unterstützte Dateitypen
- JSON.stringify()
- JSON.parse()
- Lernhandout
- Codebeispiel
Ü 20.3 - OOP KonstruktorAll
- Refcode: JSU203
- Übung A: Anhalteweg
- Übung B: OOP Präsentation
- Übungsblatt
21.1 - ProjekteALL
- Refcode: JSL211
- 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
- Projekthandout
- Codebeispiel
Ü 21.1 - ProjekteAll
- Refcode: JSU211
- 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
- Projekte
Ü 21.2 - Projekte WirtschaftAll
- Refcode: JSU212
- 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
- Projekte
Ü 21.3 - Projekte EntertainmentAll
- Refcode: JSU213
- 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
- Projekte