JavaScript

1.0 - EinführungHTML | CSS | JS

  • Allgemeines über JavaScript
  • Das HTML-Grundgerüst
  • <script> Element
  • <noscript> Element
  • Eine Vorlage erstellen
  1. Lernhandout

Hilfreiche Links

  • Hier findest du nützliche Links zum Unterricht!
  1. JS Code ausprobieren mit Tryit

2.0 - Ausgabe im BrowserHTML | JS

  • windows.alert();
  • document.write();
  • .innerHTML
  • console.log();
  1. Lernhandout

 

3.0 - VariablenJS

  • Was ist eine Variable?
  • Variablen instanziieren var
  • Wertzuweisungen
  • Konstanten mit const
  • Einzeilige Kommentare
  • Mehrzeilige Kommentare
  1. Lernhandout

 

4.0 - RechenoperatorenJS

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

Ü 4.0 - OperatorenJS

  • Übung A: Variablentypen
  • Übung B: Fahrenheit und Celsius
  • Übung C: Mitternachtsformel
  1. Übungsblatt

5.0 - FunktionenJS

  • Was ist eine Funktion?
  • Syntax einer Funktion
  • Wertübergaben
  • onClick Attribut
  • Schreibweise von Anführungszeichen
  • Eigene Runden Funktion
  • Funktionsaufruf über var
  1. Lernhandout

 

6.0 - EingabenHTML | JS

  • Eingabemöglichkeiten
  • EVA Prinzip
  • window.prompt();
  • Zeilenschaltung mit \n
  • getElementByID().value;
  1. Lernhandout

6.1 - Ereignis AttributeHTML | JS

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

Ü 6.0 - EingabeJS

  • Übung A: Pythagoras
  • Übung B: Zinseszins
  • Übung C: Deltoid
  1. Übungsblatt

 

7.0 - VerzweigungJS

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

7.1 - switch caseHTML | JS

  • switch case Syntax
  • Beispiel: Produktionsstätten
  • Info: globale Variablen
  1. Lernhandout

Ü 7.0 - VerzweigungHTML | CSS | JS

  • Übung A: Frau oder Mann
  • Infos zu Radiobuttons
  • Übung B: Rabattberechnung
  • Übung C: Systemvoraussetzungen
  1. Übungsblatt

Ü 7.1 - switch caseHTML | CSS | JS

  • Übung A: Postleitzahl
  • Übung B: Gegenüberstellung
  1. Übungsblatt

8.0 - while SchleifenHTML | JS

  • Was ist eine Schleife?
  • Kopfgesteuerte Schleifen
  • Zähler i++;
  • Fussgesteuerte Schleifen
  • break;
  • Achtung: Endlosschleife
  1. Lernhandout

8.1 - for SchleifenHTML | CSS | JS

  • Was ist eine for Schleife?
  • Syntax der for Schleife
  • Beispiel: Schriftgröße
  • Beispiel: Buchstabe für Buchstabe
  • Ausblick: for in und Arrays
  1. Lernhandout

 

Ü 8.1 - SchleifenHTML | CSS | JS

  • Übung A: Geschlecht eingeben
  • Übung B: Die drei Schleifen
  • Übung C: Primzahlen
  • Übung D: Quadratische Funktion
  1. Übungsblatt

9.0 - ArraysHTML | JS

  • Was ist ein Array (Feld)?
  • Ein Array vereinbaren
  • Werte anzeigen und verändern
  • Die .length Eigenschaft
  1. Lernhandout

9.1 - Array MethodenJS

  • .unshift()
  • .shift()
  • .push()
  • .pop()
  • .splice()
  • .join()
  • typeof(var)
  1. Lernhandout

9.2 - Arrays sortierenJS

  • .sort()
  • .reverse()
  • Zahlen sortieren
  • .forEach()
  • for...in Schleife
  1. Lernhandout

Ü 9.0 - ArraysHTML | CSS | JS

  • Übung A: Österreichische Offiziere
  • Übung B: Österreichische Offiziere II
  1. Übungsblatt
  2. Dienstgrade.zip

 

Ü 9.2 - Arrays sortierenHTML | CSS | JS

  • Übung A: Mittelwert
  • Übung B: Wettkampf
  • Übung C: Buchstaben zählen
  1. Übungsblatt

10.0 - Text OperationenJS

  • Position ermitteln
  • .indexOf()
  • Text ausschneiden
  • .slice() und .substr()
  • UTF-16 Code ermitteln
  • .charCodeAt()
  • String.fromCharCode()
  1. Lernhandout

10.1 - String MethodenJS

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

10.2 - DatumHTML | JS

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

Ü 10.0 - Text OperationenALL

  • Übung A: E-Mail-Adresse
  • Übung B: UTF-16 Code
  • Übung C: Kryptographie
  1. Übungsblatt

Ü 10.1 - String MethodenALL

  • Übung A: HTML Zeichenreferenz
  • Übung B: Suche mit JS
  • Übung C: IBAN Validierung
  1. Übungsblatt
  2. Elemente_einf.html

 

11.0 - .styleHTML | CSS | JS

  • Element.style Syntax
  • CamelCase für CSS Eigenschaften
  • Best Pracitce
  1. Lernhandout

11.1 - .style ObjektHTML | CSS | JS

  • Element.style als Objekt
  • Eventattribute mit (this)
    selbstreferenzierend
  • Beispiel: Fokus und Verlassen
  1. Lernhandout

11.2 - SelektorenHTML | CSS | JS

  • querySelector() Methode
  • Selektieren von
    HTML Elementen
    Klassen
    ID's
    Attribute
  • querySelectorAll() Methode
  • Alle über eine Schleife auswählen
  1. Lernhandout

11.3 - .setAttributeHTML | CSS | JS

  • .setAttribute() Methode
  • Hinzufügen von Attributen
  • .getAttribute() Methode
  • Wert eines Attribut auslesen
  • .removeAttribute() Methode
  • Attribut löschen
  • .hasAttribute() Methode
  1. Lernhandout

 

Ü 11.1 - .style ObjektALL

  • Übung A: Heute
  • Übung B: Lesegeschwindigkeit
  1. Übungsblatt

 

Ü 11.3 - .setAttributeALL

  • Übung A: Schriftgröße ändern
  • Übung B: Englisch
  • Übung C: Englisch
  • Übung D: Pflichtfelder anzeigen
  • Übung E: Erweiterungen
  1. Übungsblatt
  2. Registrierung.html

12.0 - Nodes im DOMHTML | JS

  • Document Object Model
  • Verwandtschaften
  1. Lernhandout
  2. Baumstruktur

12.1 - Nodes einfügenHTML | JS

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

12.2 - Nodes ersetzenHTML | CSS | JS

  • Nodes (Knoten)
  • Ersetzen durch neue Elemente
  • .replaceChild()
  1. Lernhandout

12.3 - Nodes entfernenHTML | JS

  • Nodes (Knoten)
  • Entfernen von Elementen
  • .removeChild()
  • Elternelement selektieren
  • .parentNode
  1. Lernhandout

12.4 - NodelistHTML | JS

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

Ü 12.0 - Nodes im DOMHTML | JS

  • Übung A: Verwandtschaft
  • Übung B: Baumstruktur
  1. Übungsblatt

 

 

 

Ü 12.4 - NodelistALL

  • Übung A: Einkaufsliste
  • Übung B: Personenliste Plus
  • Übung C: Personenliste Minus
  1. Übungsblatt

13.1 - documentHTML | JS

  • document Objekt
  • Methoden und Eigenschaften
  • document.URL
  • document.domain
  • document.characterSet
  • document.title
  • document.hasFocus()
  • document.readyState
  • document.designMode
  1. Lernhandout

13.2 - TimerHTML | JS

  • Timer
  • setInterval() Methode
  • clearInterval() Methode
  • setTimeout() Methode
  1. Lernhandout

 

Ü 13.2 - TimerALL

  • Übung A: Ladezeit
  • Übung B: Countdown
  • Übung C: Schreibmaschinen-Effekt
  1. Übungsblatt

14.0 - Window ObjektHTML | JS

  • Das Window Objekt
  • Fenstergröße
  • .innerHeight, .innerWidth
  • Window Methoden
  • confirm(), prompt()
  • open(), print()
  • Base 64 Kodierung
  • .btoa(), .atob()
  1. Lernhandout

14.1 - Pop-Up WindowHTML | JS

  • Pop-Up (Fenster)
  • window.open() Methode
  • Name von .open()
  • Features von .open()
  • window.close() Methode
  1. Lernhandout

14.2 - Window MethodenAll

  • 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();
  1. Lernhandout

14.3 - pageOffsetHTML | CSS | JS

  • 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;
  1. Lernhandout

Ü 14.0 - Window ObjektALL

  • Übung A: Seitenlayout
  • Übung B: dynamisches Seitenlayout
  • Übung C: En- und Decodieren
  • Übung D: Duden.de
  1. Übungsblatt

Ü 14.1 - Pop-Up WindowALL

  • Übung A: Open Street Map
  • Übung B: Linkliste
  • Übung C: Linkliste erweitert
  1. Übungsblatt
  2. aboutcss.html

 

Ü 14.3 - pageOffsetALL

  • Übung A: Scrollen
  • Übung B: Inhaltsverzeichnis
  • Übung C: Rauf und runter
  1. Übungsblatt
  2. aboutcss.html

15.1 - NavigatorHTML | JS

  • window.navigator
  • Navigator Eigenschaften
  • .language Beispiel
  • Info: .geolocation
  • .plugins
  1. Lernhandout

15.2 - LocationJS

  • 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()
  1. Lernhandout

15.3 - Wertübergabe GETHTML | JS

  • Wertübbergabe mit GET
  • Formular (method="GET")
  • Auswertung der URL
  • unescape();
  • Auswertung mit URLSearchParams
  1. Lernhandout

15.4 - localStorageJS

  • Web Storage API
  • .sessionStorage
  • .localStorage
  • Methoden
  • .setItem(); .getItem(); removeItem(); clear();
  • Ein Array speichern und abrufen
  • JSON.stringif();
  • JSON.parse();
  1. Lernhandout

15.5 - CookiesJS

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

 

Ü 15.2 - LocationALL

  • Übung A: Browser Informationen
  • Übung B: Error Docs
  1. Übungsblatt

Ü 15.3 - Wertübergabe GETALL

  • Übung A: Google Suche
  • Übung B: URL Analyse
  • Übung C: Bücher Tauschbörse
  1. Übungsblatt

Ü 15.4 - localStorageALL

  • Übung A: Besuchzähler
  • Übung B: Datum
  • Übung C: Einkaufsplan
  1. Übungsblatt

Ü 15.5 - CookiesALL

  • Übung A: Datenschutzverordnung
  • Übung B: Cookie OK
  • Übung C: Gescrollt
  1. Übungsblatt

16.1 - EventListenerHTML | JS

  • Events dynamisch vergeben
  • .addEventListener
  • Event entfernen
  • .removeEventListener
  • Druck/Print Events
  • afterprint, beforeprint
  • Zwischenablagen Events
  • copy, cut, paste
  1. Lernhandout

16.2 - Keyboard EventsHTML | JS

  • 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
  1. Lernhandout

16.3 - Mouse Event TypenHTML | JS

  • Mouse Event Typen
  • click
  • dblclick
  • contextmenu
  • mouseenter
  • mouseleave
  • mousemove
  1. Lernhandout

16.4 - Mouse EigenschaftenHTML | JS

  • 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
  1. Lernhandout

16.5 - Touch EventsHTML | JS

  • Touch Events
  • touchstart, touchmove
  • touchend, touchcancel
  • Touch Event Eigenschaften
  • .targetToches
  • Beispiel: Anzahl der Finger
  • .touches
  • Beispiel: Koordinaten
  1. Lernhandout

Ü 16.1 - EventlistenerAll

  • Übung A: Energieklassen
  • Übung B: Energieklassen II
  1. Übungsblatt

Ü 16.2 - Keyboard EventsAll

  • Übung A: Wordpress Suche
  • Übung B: Schriftgröße
  • Übung C: Tetris
  1. Übungsblatt

 

Ü 16.4 - Mouse EigenschaftenAll

  • Übung A: Navigation
  • Übung B: Fadenkreuz
  • Übung C: Color Picker
  1. Übungsblatt

 

17.1 - AudioHTML | JS

  • Audio HTML Element
  • Audio mit JS eingebunden
  • .src Eigenschaft
  • .play() Methode
  • .pause() Methode
  • Audio Eigenschaften
  • .currentSrc
  • .loop
  • .muted
  • .volume
  • .currentTime
  • .controls
  • .duration
  1. Lernhandout
  2. Europahynmne.mp3

17.2 - VideoHTML | JS

  • Video HTML Element
  • .load() Methode
  • .canPlayType() Methode
  • Video Typen und Codecs
  • .preload Eigenschaft
  1. Lernhandout
  2. croissants.mp4

17.3 - Audio|Video EventsHTML | JS

  • AV-Events
  • loadstart
  • progress
  • canplay
  • waiting
  • playing
  • seeked
  • Beispiel: seeked
  1. Lernhandout
  2. croissants.mp4

Ü 17.1 - AudioAll

  • Übung A: Europa
  • Übung B: SoundDesign
  • Übung C: MP3 Player
  1. Übungsblatt

 

 

18.1 - CanvasHTML | JS

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

18.2 - Canvas PfadeHTML | JS

  • 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)
  1. Lernhandout

18.3 - Canvas Text & BildHTML | JS

  • Umriss-Text hinzufügen
  • .strokeText() Methode
  • Text mit Füllung
  • .fillText() Methode
  • Bild darstellen
  • .drawImage() Methode
  1. Lernhandout

 

 

Ü 18.3 - CanvasAll

  • Übung A: Olympische Ringe
  • Übung B: Koordinatensystem
  1. Übungsblatt

19.1 - GeolocationJS

  • Geolocation API
  • Wie wird die Postion ermittelt?
  • Datenschutz und Sicherheit
  • .getCurrentPosition()
  • .coords. Eigenschaften
  • Error Handler (Fehler)
  1. Lernhandout

Ü 19.1 - GeoloactionAll

  • Übung A: Berg-App
  • Übung B: Online Karte auf der Berg-App
  1. Übungsblatt

20.1 - OOP EinführungJS

  • Objektorientiertes Programmieren
  • Einführung
  • Objekt mit new vereinbaren
  • Objekteigenschaften festlegen
  • Zugriff auf Objekteigenschaften
  • Objektmethoden festlegen
  • Aufruf von Objektmethoden
  1. Lernhandout

20.2 - OOP LiteraleJS

  • Alternative Schreibweise im OOP
  • this
  • Ein Array im Objekt
  1. Lernhandout

20.3 - OOP KonstruktorJS

  • Was ist ein Konstruktor?
  • Aufbau einer Konstruktorfunktion (this)
  • Vereinbarung eines Objekts (new)
  • .prototype
  • Vererbung
  1. Lernhandout

20.4 - JSONJS

  • Was ist JSON?
  • Nutzung von JSON
  • Unterstützte Dateitypen
  • JSON.stringify()
  • JSON.parse()
  1. Lernhandout

 

 

Ü 20.3 - OOP KonstruktorAll

  • Übung A: Anhalteweg
  • Übung B: OOP Präsentation
  1. Übungsblatt

 

21.1 - ProjekteALL

  • 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
  1. Projekthandout

 

 

Ü 21.1 - ProjekteAll

  • 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
  1. Projekte

Ü 21.2 - Projekte WirtschaftAll

  • 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
  1. Projekte

Ü 21.3 - Projekte EntertainmentAll

  • 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
  1. Projekte

 

 

JavaScript © Thomas Maier, 2019 Graz |