Kurs MOC 55320 Programmierung mit HTML, CSS und JavaScript

Seminarinhalte

Kurze Einsicht in die Web-Entwicklung

• HTML ist Teil eines Teams
• Client-seitige und serverseitige Programmierung
• Web-Entwicklungstechnologien

Einführung in HTML

• Erste Schritte zur Erstellung eines einfachen HTML Dokuments
• HTML-Elemente, Attribute und Kommentare
• Das HTML Gerüst
• Anzeige des Seitenquelltextes
• Sonderzeichen
• Arbeiten mit HTML-Elementen und Sonderzeichen
• HTML History
• Das lang-Attribut

Absätze, Überschriften und Text

• Absätze
• Überschriftenebenen
• Umbrüche und horizontale Regeln
• Arbeiten mit Absätzen, Überschriften und Text
• Der div-Tag
• Erstellung einer HTML Seite
• Zitierter Text
• Vorformatierter Text
• Semantische Inline-Elemente
• Das Hinzufügen von Inline-Elementen

HTML Verknüpfungen

• Einführung in Links
• Das Hinzufügen von Links
• Verlinkung zu einer bestimmten Stelle auf der Seite
• Text-Verknüpfungen
• Unterschied von absoluten und relativen Pfaden
• Anvisierung neuer Tabs
• E-Mail-Verknüpfungen
• Lorem Ipsum
• Das Attribut title
• Anvisierung eines bestimmten Ortes auf der Seite

HTML Images

• Import von Images
• Image-Links
• Hinzufügen von Images zum Dokument
• Hinzufügen von Images zu einer Seite
• Bereitstellung alternativer Images

Die HTML Listenerstellung

• Nicht geordnete Listen
• Geordnete Listen
• Definitions-Listen
• Erstellung von Listen

Crashkurs in CSS

• Die Vorteile von Cascading Style Sheets (CSS)
• CSS Regeln
• Selektoren
• Kombinatoren
• Vorrang von Selektoren
• Gestaltung von Browser Seiten
• CSS Resets
• CSS Normalizers
• Externe und eingebettete Stylesheets und Inline Styles
• Erstellung eines externen Stylesheets
• Erstellung eines eingebetteten Stylesheets
• Das Hinzufügen von Inline-Styles
• div und span
• Gestaltung von div und span
• Medientypen
• Maßeinheiten
• Vererbung

CSS Schriftarten

• font-family
• @font-face
• font-size
• font-style
• font-variant
• font-weight
• Zeilenhöhe
• Schriftkürzel
• Gestaltung der Schriftarten

Farbe und Deckkraft

• Einführung in Farbe und Deckkraft
• Werte für Farbe und Deckkraft
• Farbe
• Deckkraft
• Das Hinzufügen von Farbe und Deckkraft zu Text

Der CSS Text

• Buchstaben-Abstand
• text-align
• text-decoration
• text-einzug
• text-schatten
• text-transform
• Leerzeichen
• Wortumbruch
• Wortabstand
• Texteigenschaften

Einführung in die Basics von JavaScript

• Unterschiede von JavaScript und EcmaScript
• Das HTML DOM
• JavaScript Syntax- Zugriff auf Elemente
• Der Entstehungsort des JavaScript-Codes
• JavaScript-Objekte: Methoden und -Eigenschaften
• Warnungen, das Schreiben und Ändern der Hintergrundfarbe

Arbeiten mit Variablen, Arrays und Operatoren

• JavaScript-Variablen
• Eine lose typisierte Sprache
• Google Chrome DevTools
• Speicherung von Benutzer eingegebenen Daten
• Verwendung der Variablen
• Konstanten
• Arrays
• Arbeiten mit Arrays
• Assoziative Arrays
• Spielen mit Array-Methoden
• JavaScript-Operatoren
• Der Modulus-Operator
• Spielen mit Operatoren
• Der Standard-Operator
• Arbeiten mit Operatoren

JavaScript-Funktionen

• Globale Objekte und Funktionen
• Arbeiten mit globalen Funktionen
• Benutzerdefinierte Funktionen
• Das Schreiben einer JavaScript Funktion
• Rückgabe von Werten aus Funktionen

Eingebaute JavaScript Objekte

• Zeichenketten
• Mathematik
• Datum
• Hilfsfunktionen
• Rückgabe des Wochentags als String

Bedingungen und Schleifen

• Konditionale Bedingungen
• Kurzschluss
• Schalter / Fall
• Ternärer Operator
• Truthy und Falsy
• Bedingte Verarbeitung
• Schleifen
• while und do while Schleifen
• for-Schleifen
• break und continue
• Arbeiten mit Schleifen
• Array: forEach()

On-Event Handler und Zuhörer

• On-Event-Handler
• Verwendung von On-Event-Handlern
• Die Methode addEventListener()
• Anonyme Funktionen
• Erfassung von Schlüss-Events
• Das Hinzufügen von Event Listener
• Vorteile von Event Listener
• Zeitgeber
• Typisierungstest

Das HTML Dokumentenobjektmodell

• CSS Selektoren
• Die Eigenschaft innerHTML
• Knoten, NodeLists und HTML Collections
• Zugriff auf Elementknoten
• Punktschreibweise und eckige Klammerschreibweise
• Hierarchischer Zugriff auf Elemente
• Arbeiten mit hierarchischen Elementen
• Zugriff auf Attribute
• Erstellung neuer Knoten
• Fokussierung auf ein Feld
• Anwendung der Einkaufsliste
• Die Protokollierung
• Das Hinzufügen von Event Listener
• Das Hinzufügen von Elementen zur Liste
• Dynamisches Hinzufügen von Entfernen-Schaltflächen zu den Listenelementen
• Entfernen von Listenelementen
• Verhinderung von Duplikaten und Produktnamen mit Null-Länge
• Manipulation von Tabellen

HTML Formulare

• Die Funktionsweise von HTML Formularen
• Das Formular-Element
• Formular-Elemente
• Schaltflächen
• Erstellung eines Registrierungsformulars
• Kontrollkästchen
• Radio-Schaltflächen
• Das Hinzufügen von Kontrollkästchen und Optionsschaltflächen
• Feldsätze
• Auswahl von Menüs
• Textareas
• Das Hinzufügen eines Auswahlmenüs und einer Textarea
• HTML Formulare und CSS

JavaScript Formularüberprüfung

• Serverseitige Formularvalidierung
• HTML-Formular-Validierung
• Zugriff auf Formulardaten
• Formular-Validierung mit JavaScript
• Das Prüfen der Gültigkeit der Felder E-Mail und URL
• Das Prüfen der Gültigkeit von Eingabe- und Absende-Ereignissen
• Hinzufügen von Fehlermeldungen
• Validierung von Textareas
• Validierung der Checkboxen
• Validierung von Radio-Buttons
• Validierung von Auswahlmenüs
• Validierung des Eiscreme-Bestellformulars
• Chancenvergabe für den Benutzer

Reguläre Ausdrücke

• Erste Schritte
• Syntax regulärer Ausdrücke
• Rückverweise
• Formularüberprüfung mit regulären Ausdrücken
• Bereinigung von Formulareinträgen
• Ein etwas komplexeres Beispiel