MOC 55320 Programming with HTML, CSS, and JavaScript
Classroom Schulung | Deutsch | Anspruch
Schulungsdauer: 5 Tage
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
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