MOC 55320 Programming with HTML, CSS, and JavaScript

Ziele

In diesem Kurs erhalten die Teilnehmer eine Einführung in HTML5, CSS3 und JavaScript. Es werden grundlegende HTML5/CSS3/JavaScript-Programmierkenntnisse vermittelt. Zudem wir ein besonderes Augenmerk auf folgende Aspekte gelegt: Verwendung von HTML5/CSS3/JavaScript zur Implementierung von Programmierlogik, Definition und Verwendung von Variablen, Durchführung von Schleifen und Verzweigungen, Entwicklung von Benutzeroberflächen, Erfassung und Validierung von Benutzereingaben, Speicherung von Daten und Erstellung gut strukturierter Anwendungen.

Dieses Seminar ersetzt den Kurs MOC 20480 Programming in HTML5 with JavaScript and CSS3

Zielgruppe

Anwendungsentwickler

Voraussetzungen

• Grundlegende Computerkenntnisse

Agenda

Ein kurzer Überblick über die Webentwicklung

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

Einführung in HTML

• Übung: Ein einfaches HTML-Dokument
• Erste Schritte mit einem einfachen HTML-Dokument
• HTML-Elemente, Attribute und Kommentare
• Das HTML-Gerüst
• Anzeigen des Seitenquelltextes
• Sonderzeichen
• HTML-Elemente und Sonderzeichen
• Geschichte von HTML
• Das lang-Attribut

Absätze, Überschriften und Text

• Absätze
• Überschriftenebenen
• Umbrüche und horizontale Regeln
• Übung: Absätze, Überschriften und Text
• Der div-Tag
• Eine HTML-Seite erstellen
• Zitierter Text
• Vorformatierter Text
• Semantische Inline-Elemente
• Übung: Hinzufügen von Inline-Elementen

HTML-Verknüpfungen

• Links Einführung
• Text-Verknüpfungen
• Absolute vs. Relative Pfade
• Neue Tabs anvisieren
• E-Mail-Verknüpfungen
• Übung: Hinzufügen von Links
• Lorem Ipsum
• Das Attribut title
• Verlinkung zu einer bestimmten Stelle auf der Seite
• Einen bestimmten Ort auf der Seite anvisieren

HTML Images

• Einfügen von Images
• Image-Links
• Hinzufügen von Images zum Dokument
• Übung: Hinzufügen von Images zu einer Seite
• Alternative Bilder bereitstellen

HTML-Listen

• Nicht geordnete Listen
• Geordnete Listen
• Definitions-Listen
• Übung: Erstellen von Listen

Crashkurs in CSS

• Vorteile von Cascading Style Sheets
• CSS-Regeln
• Selektoren
• Kombinatoren
• Vorrang von Selektoren
• Wie Browser Seiten gestalten
• CSS-Resets
• CSS-Normalizers
• Externe Stylesheets, eingebettete Stylesheets und Inline-Styles
• Übung: Erstellen eines externen Stylesheets
• Übung: Erstellen eines eingebetteten Stylesheets
• Übung: Hinzufügen von Inline-Styles
• div und span
• Übung: Gestalten 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
• Übung: Schriftarten gestalten

Farbe und Deckkraft

• Über Farbe und Deckkraft
• Werte für Farbe und Deckkraft
• Farbe
• Deckkraft
• Übung: Hinzufügen von Farbe und Deckkraft zu Text

CSS-Text

• Buchstaben-Abstand
• text-align
• text-decoration
• text-einzug
• text-schatten
• text-transform
• Leerzeichen
• Wortumbruch
• wort-abstand
• Übung: Texteigenschaften

JavaScript-Grundlagen

• JavaScript vs. EcmaScript
• Das HTML-DOM
• JavaScript-Syntax- Zugriff auf Elemente
• Wo wird JavaScript-Code geschrieben?
• JavaScript-Objekte, -Methoden und -Eigenschaften
• Übung: Warnungen, Schreiben und Ändern der Hintergrundfarbe

Variablen, Arrays und Operatoren

• JavaScript-Variablen
• Eine lose typisierte Sprache
• Google Chrome DevTools
• Speichern von vom Benutzer eingegebenen Daten
• Übung: Variablen verwenden
• Konstanten
• Arrays
• Übung: Arbeiten mit Arrays
• Assoziative Arrays
• Spielen mit Array-Methoden
• JavaScript-Operatoren
• Der Modulus-Operator
• Mit Operatoren spielen
• Der Standard-Operator
• Übung: Arbeiten mit Operatoren

JavaScript-Funktionen

• Globale Objekte und Funktionen
• Übung: Arbeiten mit globalen Funktionen
• Benutzerdefinierte Funktionen
• Übung: Eine JavaScript-Funktion schreiben
• Rückgabe von Werten aus Funktionen

Eingebaute JavaScript-Objekte

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

Bedingungen und Schleifen

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

Ereignisbehandler und Zuhörer

• On-Event-Handler
• Übung: Verwendung von On-Event-Handlern
• Die Methode addEventListener()
• Anonyme Funktionen
• Erfassen von Schlüsselereignissen
• Übung: Hinzufügen von Ereignis-Listenern
• Vorteile von Ereignis-Listenern
• Zeitgeber
• Typisierungstest

Das HTML-Dokumentenobjektmodell

• CSS-Selektoren
• Die Eigenschaft innerHTML
• Knoten, NodeLists und HTMLCollections
• Zugriff auf Elementknoten
• Übung: Zugriff auf Elemente
• Punktschreibweise und eckige Klammerschreibweise
• Hierarchischer Zugriff auf Elemente
• Übung: Arbeiten mit hierarchischen Elementen
• Auf Attribute zugreifen
• Neue Knoten erstellen
• Fokussierung auf ein Feld
• Anwendung der Einkaufsliste
• Übung: Protokollieren
• Übung: Hinzufügen von EventListenern
• Übung: Hinzufügen von Elementen zur Liste
• Übung: Dynamisches Hinzufügen von Entfernen-Schaltflächen zu den Listenelementen
• Übung: Entfernen von Listenelementen
• Übung: Verhindern von Duplikaten und Produktnamen mit Null-Länge
• Manipulation von Tabellen

HTML-Formulare

• Wie HTML-Formulare funktionieren
• Das Formular-Element
• Formular-Elemente
• Schaltflächen
• Übung: Erstellen eines Registrierungsformulars
• Kontrollkästchen
• Radio-Schaltflächen
• Übung: Hinzufügen von Kontrollkästchen und Optionsschaltflächen
• Feldsätze
• Menüs auswählen
• Textareas
• Übung: 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
• Übung: Prüfen der Gültigkeit der Felder E-Mail und URL
• Prüfen der Gültigkeit von Eingabe- und Absendeereignissen
• Hinzufügen von Fehlermeldungen
• Validierung von Textareas
• Checkboxen validiere
• Validierung von Radio-Buttons
• Validierung von Auswahlmenüs
• Übung: Validierung des Eiscreme-Bestellformulars
• Dem Benutzer eine Chance geben

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
• Übung: Bereinigung von Formulareinträgen
• Ein etwas komplexeres Beispiel