Programming with HTML, CSS, and JavaScript

In mehr als 30 Übungen erhalten Sie in diesem Kurs eine schnelle Einführung in die drei größten clientseitigen Sprachen: HTML, CSS und JavaScript. Der Fokus liegt dabei auf der Verwendung von HTML, CSS und JavaScript, um Webseiten zu entwickeln, Programmierlogik zu implementieren, Variablen zu definieren und zu verwenden, Looping und Branching auszuführen, Benutzereingaben zu erfassen und zu validieren, Daten zu speichern sowie gutstrukturierte Anwendungen zu erstellen. HTML5-APIs werden jedoch nicht abgedeckt.

Zusammen mit 55244: JavaScript for Developers und 55319: HTML5 and CSS stellt das Seminar die Community-Courseware-Version von MOC 20480: Programming in HTML5 with JavaScript and CSS3 dar.

Inhalt

Ein schneller Überblick über die Webentwicklung

• HTML ist Teil eines Teams
• Clientseitige Programmierung
• Serverseitige Programmierung
• Webentwicklungstechnologien

Einführung in HTML

• Start mit einem einfachen HTML-Dokument
• HTML-Elemente, -Attribute und -Kommentare
• Das HTML-Grundgerüst
• Ansicht der Seitenquelle
• Spezielle Charaktere
• HTML-Elemente und spezielle Charaktere
• Geschichte von HTML
• Das lang-Attribut

Absätz

• Absätze
• Überschriftenebenen
• Zeilenumbrüche und horizontale Regeln
• Der div-Tag
• Erstellen einer HTML-Seite
• Zitierter Text
• Vorformatierter Text
• Semantische Inline-Elemente

HTML-Links

• Einführung in Links
• Textlinks
• Absolute vs. relative Pfade
• Neue Tabs als Ziel angeben
• E-Mail-Links
• Lorem Ipsum
• Das title-Attribut
• Verlinken zu einer spezifischen Stelle auf der Seite
• Targeting einer spezifischen Stelle auf der Seite

HTML-Bilder

• Einfügen von Bildern
• Bildlinks
• Hinzufügen von Bildern zu einem Dokument
• Bereitstellen alternativer Bilder

HTML-Listen

• Ungeordnete Listen
• Geordnete Listen
• Definitionslisten

Crashkurs in CSS

• Vorteile von Cascading Style Sheets
• CSS-Regeln
• Selektoren
• Kombinatoren
• Rangfolge von Selektoren
• Wie Browser Seiten gestalten
• CSS-Resets
• CSS-Normalisierer
• Externe Stylesheets, eingebettete Stylesheets und Inline-Stile
• div und span
• Medienarten
• Einheiten der Bemessung
• Vererbung

CSS-Schriften

• font-family
• @font-face
• font-size
• font-style
• font-variant
• font-weight
• line-height
• font shorthand
• Gestalten von Schriften

Farbe und Deckkraft

• Über Farbe und Deckkraft
• Farb- und Deckkraftwerte
• color
• opacity
• Hinzufügen von Farbe und Deckkraft zu Text

CSS-Text

• letter-spacing
• text-align
• text-decoration
• text-indent
• text-shadow
• text-transform
• white-space
• word-break
• word-spacing
• Texteigenschaften

JavaScript-Grundlagen

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

Variablen, Arrays und Operatoren

• JavaScript-Variablen
• Eine schwach typisierte Sprache
• Google Chrome DevTools
• Speichern von Daten, die Benutzer eingegeben haben
• Konstanten
• Arrays
• Assoziative Arrays
• Spielen mit Array-Methoden
• JavaScript-Operatoren
• Der Modulus-Operator
• Spielen mit Operatoren
• Der Default-Operator

JavaScript-Funktionen

• Globale Objekte und Funktionen
• Benutzerdefinierte Funktionen
• Zurückgeben von Werten aus Funktionen

Eingebaute JavaScript-Objekte

• Strings
• Math
• Date
• Hilfe-Funktionen

Bedingungen und Schleifen

• Conditionals
• Kurzschlussauswertung
• Switch/Case
• Der Ternary-Operator
• Truthy und Falsy
• Bedingte Verarbeitung
• Loops
• while and do…while Loops
• for Loops
• break und continue
• Arbeiten mit Loops
• Array: forEach()

Event Handlers und Listeners

• On-event Handlers
• Die addEventListener()-Methode
• Anonyme Funktionen
• Erfassen von Schlüsselereignissen
• Vorteile von Event Listeners
• Timers
• Schreibtest

Das HTML Document Object Model

• CSS-Selektoren
• Die innerHTML-Eigenschaft
• Knoten, NodeLists und HTMLCollections
• Zugriff auf Elementknoten
• Punktnotation und Notation mit eckigen Klammern
• Hierarchischer Zugriff auf Elemente
• Zugriff auf Attribute
• Erstellen neuer Knoten
• Fokussierung auf ein Feld
• Einkaufslistenanwendung
• Logging
• Hinzufügen von EventListeners
• Hinzufügen von Objekten zur Liste
• Dynamisches Hinzufügen von Entfernen-Buttons zu Listenobjekten
• Entfernen von Listenobjekten
• Verhindern von Duplikaten und Nulllängen-Produktnamen
• Manipulieren von Tabellen

HTML-Formulare

• Wie HTML-Formulare arbeiten
• Das form-Element
• Formularelemente
• Buttons
• Erstellen eines Registrierungsformulars
• Checkboxen
• Radio-Buttons
• Fieldsets
• Auswahlmenüs
• Textbereiche
• HTML-Formulare und CSS

Validierung von JavaScript-Formularen

• Serverseitige Formularvalidierung
• HTML-Formularvalidierung
• Zugriff auf Formulardaten
• Formularvalidierung mit JavaScript
• Überprüfen der Validität der E-Mail- und URL-Felder
• Überprüfen der Validität von Eingabe- und Übermittlungsereignissen
• Hinzufügen von Fehlermeldungen
• Validieren von Textbereichen
• Validieren von Checkboxen
• Validieren von Radio-Buttons
• Validieren von Auswahlmenüs

Reguläre Ausdrücke

• Syntax regulärer Ausdrücke
• Rückverweise
• Formularvalidierung mit regulären Ausdrücken
• Formulareinträge bereinigen

Voraussetzung

Grundlegende Computerkenntnisse

Zielgruppe

Webentwickler