Zusammenfassung Web

cssKomplettzusammenfassung Web-Programmierung 1
1. Programmierung:
- Formulierung und Analyse des Problems, Erstellung eines Computerprogramms fürs Problem
-Tätigkeit, C omputerprogramme zu erstellen, Aktivitäten und Analysen, Entwicklung von Algorithmen

- Formulierung eines Rechenproblems  ausführendes Computerprogramm
Coding: Automatisierung von Aufgaben, Codes von einer Sprache in eine andere
Programmierer vs Codierer
Codierer übersetzt Logik in eine Sprachmaschine ( Sprachorientiert). Programmierer beschäftigt sich mit allem, mit
dem Gesamtbild
Software Entwicklungsprozess:
Analyse: Analyse von Geschäftsprozessen; Erarbeitung von funktionale und nicht-funktionale Anforderungen,
Erstellung von Szenarien; Gruppierung und Strukturierung der Anforderungen
-> Output: Lastenheft, Pflichtenheft, Glossar,…
Entwurf: Systemdesign( Datenmodell, Datenstruktur, Schnittstellen), Performance Abschätzung, Planung des Tests
Implementation: Ausführung
Testing: technische (unit, performance, security) und inhaltliche Tests (Können alle Szenarien abgedeckt werden?)
Vorgehensmodelle: Wasserfallmodell, V-Modell, erweitertes Wasserfallmodell, Agile Methodology
Software Bugs: Mariner I Crash durch fehlenden Bindestrich, Y2K Problem, Northeast Blackout durch Race Condition,
Divide by Zero Bug
Qualitätskriterien: Portability, Functionality, Reliability, Usability, Efficiency, Maintainability
Web-Umfeld:
Chrome, Windows 10, Fritz! OS, HP ProVision, Cisco IOS, FreeBSD, Apache httpd (Webserver)
Fehlende Software:
- Hypervisor, USV, Klima, Zugangskontrolle, Content Erstellung, Analyse, SEO,…
2. WWW und HTML
Syntax: Was wird genau gemacht? A,b, c schreiben -> Sagt noch nichts aus, zb 046586781? Kann telefonnummer sein
aber auch Kontonummer
Symbole, z.B.: Buchstaben

Symbole + Syntax (die Zusammensetzung), zb aus Buchstaben Wörter
-> Daten: Können alles bedeuten, sind nur daten
Daten + Bedeutung -> Information
z.B.: 507707 + Steuernummer
Information + Links -> Knowledge
Informationen zusammenfügen
z.B.: Winter = Kalt
WWW: globales, verteiltes Informationssystem, das hypermediale Daten mit Hilfe des http-Protokolls auf Grundlage
Internet Technologie zur Verfügung stellt
Hypertext System: Dokumente enthalten Verweise (Hyperlinks)
Hypermedial: enthalten nicht nur Text, sondern auch andere Medien
Plattformunabhängig
Urprüngliches Ziel:
Erleichterung der Publikation von Forschungsergebnissen und hypermedialer Zugriff auf Datenbanken
Design Prinzipien:
Einfach, Plattformunabhängig, Zugriff auf mehrere Protokolle, Client-Server Architektur (Request Response
Paradigma), erste Implementierung im CERN durch Browser Mosaic
Anwendung der SGML (Structured Generalized Markup Language)
Zur Strukturierung und Formatierung von Web Inhalten
Aktuelle W3C Recommendation: html 5.1
Grundbegriffe:
Document: Baumförmige Datenstruktur aus HTML Elementen und Text, nach dem Parsen durch Browser wird
daraus DOM
Parsen: Inhalt einer Datei wird auf Begriffe überprüft, die durch einen anderen Begriff ersetzt werden können
DOM: Document Object Model, Programmierschnittstelle, welche HTML Dokumente als Baumstruktur
darstellt, in der jeder Knoten ein Objekt ist, welches einen Teil des Dokuments repräsentiert (z.B. Absatz,
Überschrift). Plattformunabhängig und erlaubt, Struktur und Layout eines Dokumentes zu verändern. Wichtig
für dynamische Webseiten.
Browsing Context: Browserfenster, jeder Context hat eigene Historie, nur ein aktives Document pro Context
Processing Model: Spezifikation der Schritte, die Browser ausführt, wenn er Ressource aus Web lädt
Content Model: elementbezogen, gibt an, welchen Inhalt ein spezifisches Element haben kann, Inhalt wird als
Kindelement im DOM eingefügt
Struktur eines Web-Dokuments
Dokumentkopf (Begrenzung durch <head>, beinhaltet Informationen: Titel, Stickpunkte für Suchmaschine,
Beschreibung des Inhalts)
Dokumentkörper (Begrenzung durch <body>, eigentlicher Inhalt: Text, Verweise, Listen Hyperlinks)
HTML = Hypertext Markup Language
HTML dient der Strukturierung und Formatierung von Web-Inhalten (Texte, Bilder,etc.)
HTML Sections:
Head: title, meta (name=keywords), externe Dateien (Stylesheets)

Body: Inhalt:
Analyse, welche Informationen man darstellen will,
Strukturieren mit Sitemap und Mockup Phase, = vereinfachtes Modell der Website
HTML Elemente:
 Links (absolut, relative, root-relative, Web 03 Folie 8, Attribute: href,id,.., <a bedeutet anker)
o Absoluter Link: von außen
o Relativer Link: zeigt nach innen, ausgehend von aktuellem Ort
o Root-relative link: zeigt nach innen, ausgehend vom obersten erreichbaren Ort
 Tables
o Tr = Tabellenzeile, Td= Tabellenzelle, thead= Tabellenüberschrift
 DIV (Block-Element) & SPAN (Inline-Element) -> Ohne Formatierung sinnlos
 Listen (ungeordnete Listen ul [li], deskriptive Liste dl [dt,dd])
 Bilder (src, width, height…)
 Zeichenformatierung: physikalisch (fett <b>, kursiv <i>, hochgestellt <sup>) und semantisch (<cite>, <code>)
Elemente für Formulare:

HTML Formulare
Textfelder, Radio Buttons, Checkboxes, Listen, Submit Button, Reset Button,… dienen der Eingabe von Informationen
durch den Benutzer, zb Umfrage, Suchmaschine -> <form ….. </form>
Metadata: Präsentation, Verhalten, Verhältnis des Dokuments zu anderen

base, link, meta, noscript, script, style, template, title
Flow Elemente: fast alle Elemente, die im Body vorkommen, werden als
Flow kategorisiert
Sectioning: Gültigkeitsbereich von headings und footers (artice, section)
Heading: Überschriftenhierarchie (h1)
Phrasing: Enthalten nur Text (a, br,…)
Embedded: eingebettete Inhalte (audio, img,…)
Interactive: interaktive Inhalte (button, textarea)
Palpable: nicht leerer Content (strong, span, table,…)
Paragraphs: Absätze sind ein Grundbestandteil und werden als Folge von Elementen aus dem Phrasing
definiert (section)
Eventhandler Attribute: Funktionen, die vom User Agent aufgerufen werden (onclick)
Box Model:
Gesamtbreite: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
Gesamthöhe: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-

bottom
Layout:
Webseite ist aus Boxen aufgebaut, die dem Box Model folgen und alle Attribute haben. Größenangaben im Box Modell
sind absolut (Pixel) und auch relativ (Prozent)
Maßeinheiten: HTML kennt relative und absolute Maßangaben
Relative Maßangaben:
em: Vielfaches der aktuellen Schriftgröße des Elements (Angabe als Ganzzahl Faktor)
Absolute Maßangaben: cm Zentimeter, px Pixels
HTML Flow:
- Zentrale Komponente des Webseiten Renderings: Document Flow
- Ergibt sich aus der Anordnung der Elemente im Quelltext und aus dem Typ
Unterschied zwischen Inline und Block-level Elementen:

- Inline: Passen Größe an Inhalt an, keine neue Zeile, auch nebeneinander
<span>, <img>, <a>
- Block: Füllen maximale Breite, Kindelement eines anderen, nimmt es die Breite des vorgegebenen Elements an,
beginnen auf eigener Zeile
<div>, <p>, <h1>,…
Rendering:
- Grafische Ausgabe im Browserfenster
- Quellcode, Stylesheets, JavaScript Dateien werden im Browser zusammengefügt
- Ergebnis: DOM Baum
CSS Cascading
Mehrere Quellen von Style Informationen, die sich nach einer festen Reihenfolge überlagern
1. Default Style des Browsers
2. Styles, die der User definiert
3. Style Informationen des Website Autors (Größte Priorität)
Style Vererbung: Elternelemente im DOM vererben an Kind Elemente
CSS - Cascading Stylesheets
Formatierungssprache für strukturierte Web-Dokumente
Ziel: Trennung von Formatierung und Inhalt
Aufbau: Ein Style Sheet ist eine Sammlung von Regeln, die auf ein Dokument angewendet werden
- Selector: spezifiziert, welches Element betroffen ist
- Declaration: legt Stil fest, besteht aus 2 Teilen: Property (Eigenschaft) und Value (Wert)
Beispiel: H1 {color: green;} Deklaration
Selektor Eigenschaft Wert

Durch Einbindung im Kopf gilt der Style für das ganze Dokument
Style Sheets in externer Datei: HTML Element link referenziert die Datei
Beispiel außerhalb:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Innerhalb eines HTML Elements:
<html>
<head>
</head>
<body>
<h1 style="color: green">Hello World</h1>
</body>
</html>
Diese CSS-Angabe gilt nur für dieses H1-Tag
Medientypen:
Angabe Zielmedium: @import url („Beispiel.css“) Medientyp;
@media print { /* Stylesheet für den Druck */}
Angabe Zielmedium innerhalb Dokumentensprache:
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
CSS- Medientyp gibt eine Menge von Eigenschaften an, z.B.: für print, projection, tv,…
Häufig Ersetzung durch Media Queries: <link rel="stylesheet" media="(max-width: px)"/>
CSS Selektoren:
Element: Selektiert alle Elemente des angegebenen Elementtyps
<span>Hallo</span> span {…} h1 {…}
Class: Selektiert alle Elemente, die die angegebene CSS Klasse haben
<span class="redText">Hallo</span> .redText {…}
ID: Selektiert alle Elemente anhand der ID

<div id="firstRed">Hallo Welt</div> #fistRed {…}
Universal: Alle Elemente, Beispiel: *
Attibute: Selektiert alle Elemente, bei denen das Attribut den entsprechenden Wert aufweist
Presence: [data-fhws]
Exact Value: [data-fhws=“Begrüßung“]
Substring: Sucht nach Wert, selektiert alle die dieses Wort enthalten haben, [data -fhws*=“Inhalt“]
Prefix: Selektiert alle, die mit dem Wert anfangen, zb [data-fhws^=“begrüßung“]
Suffix: Selektiert alle, die mit dem Wert aufhören, zb [data-fhws$=“Inhalt“]
Pseudo Klassen: Selektiert alle Elemente des entsprechenden Typs, aber nur wenn sie zusätzlich eine der in HTML fest
vorgegebenen Pseudo Klassen besitzen
Hover: Wenn man drüber geht, dann selektiert es; a:hover { … }, z.B.: h2:hover{}
Nth-of-type: selektiert das nth von type, man kann auch jedes wählen, z.B.: li:nth-of-type(2n) {}, li:nth-of-type(2n+1)
{}, li:nth-of-type(3) {}
Selection:Selektiert, wenn du etwas auswählst, zb ::selection{}
Pseudo Elemente
A::after/before= fügt oder bearbeitet etwas hinter/vor dem A an, zb li::after {content:“XXX“}
Kontext: Selektiert alle <li>, die innerhalb eines Containers mit der id „nav“ stehen
#nav li { … }
Kombinierte Selektoren: Gruppiert ELemente
Group: selektiert alle genannten Elemente; A, B, z.B.: h1, h2, h3 { }
Child: Selektiert nur die direkten Nachfolger (Kinder) eines Elternteils, im DOM also eine Ebene unter dem Element der
Regel stehen, A > B
#nav > li { … }
Adjacent Sibling: Geschwister, bleiben auf der gleichen Ebene, der angrenzende, muss direkter Nahbar sein, zb div + p
General Sibling: Geschwister, alle werden auf der gleichen Ebene selektiert, div ~ p (~ muss unten stehen)
Wie vorher, nur wird nur das <li> selektiert, das direkt an das linke Element (#nav) der Regel anschließt und sich auf
gleicher Ebene befindet, A + B
#nav + li { … }
General Sibling: Hier müssen beide Selektoren das gleiche Eltern Element besitzen und das rechte (<li>) muss auf das
linke (#nav) Element der Regel folgen, A_B
#nav + li { … }
Descendant: Abkomme von Eltern, Großeltern, A B. z.B.: div span {}
CSS= nur physikalische Formatierungen
CSS ausgewählte Formatierungen
Hintergrund
 Property:
o { background-color: #ffffff; }
o { background-image: url(pfadZumBild.jpg) }
o { background-position: <horizontale Position< <vertikale Position> }
 Horizontal: center, left, right
 Vertikal: center, top, bottom
 Können zu einem formatiert werden
o {background: url(pfadZumBild.jpg) no-repeat 0 50% }
Zeichenformatierung
 Property:
o {color: <Farbe> }
 Angabe mit Schlüsselwörter (Yellow, balck), RGB Werten (10, 10, 10),
o {font-family: <Schriftart>}
 { font-family: arial, helvetica, sans-serif }
 Priorität von links nach rechts kleienr
o {font-size}
 {font-size: 12px}, {font-size: 2em}
o {font-style} -> für kursiven Text
 {font-style: italics}
o • {font-weight} -> Schriftstärke
 {font-weight: bold}
o {text-transform} -> Schreibweise
 uppercase, lowercase,
Typographie
 Richtige Verwendung von Schriftarten und Schriften, da man viele Möglichkeiten hat
 http://www.webtypography.net/
Web Font
 Du kannst Schriftarten auf deine eigene Website einbinden

 https://fonts.google.com
 Schriftart mit @font-face einbinden
 Bdoy: font-family: 'Tangerine', serif; font-size: 48px;
CSS Spezifität:
Regeln für ein Element
Mechanismen: Style Definition mit größerer Spezifität gewinnt, bei gleicher Spezifität gewinnt letzte Definition
Layouts:
Positionierung: top, bottom, left, right
- static: dort, wo es im flow erscheint
- absolute: über Attribute (top, bottom, left, right ) platziert, ist danach kein Block Element mehr, wenn man Website
kleiner macht, sieht man es nicht mehr, geht raus aus Flow, Ausrichtung vom Beginn des Dokuments
- fixed: Ausrichtung am sichtbaren Bildschirmbereich
-relative: bleibt im Flow, verschiebt vpm ursprungsplatz und Platz im FLow bleibt erhalten
-position: static/absolute/fixed/relative;
Top: 150px:
Left: 150px;
Display Property
Ist es ein inline, block doer flexbox element?
Box Model:
 margin, padding, border lassen sich beliebig anpassen: Properties: margin-top / bottom / left…
Shorthand: #element {margin 10px 20px}
Floats:
- Text und Elemente fließen lassen
- Property kann Werte annehmen: none, left, right, inline-start
- Wenn Property gesetzt ist, ordnen sich block Elemente so lange vertikal an bis für das nächste kein Platz mehr ist
- border: 2px solid lime;
-Praxis:
 platzieren sich hintereinandere horizontal, verhält sich wie ein Span, verbraucht nur so viel Platz, wie Sie
brauchen
 fängt keine neue Zeile mehr an, äußer wenn nötig
-> kann sein das es in der Luft hängt, Lösung: clear:
both;
 left: wird von links gefüllt( wie gewohnt
 right: wird von recht gefüllt
Flexbox:
- Container und Inhalte
- Container definiert Bereich, in dem Inhalte platziert werden können
- Kriterien: Größe, Verteilung, Ausrichtung, Sortierung
- Ausrichtung entlang Hauptachse wird durch justify-content Parameter gesteuert
- Entlang der Cross-Achse heißt der Parameter align-items
 Bennenung Parameter bleibt gleich, nur Achsenrichtung unterscheides sich

zwischen Spalten und Zeilen Modus
Column: untereinander sortiert, also spalten
Row: nebeneinander, zeile
Column-reverse; Gegenteil, gut weil manche von rechts nach links lesen
Justify-content: Flex-start, align-itmes: Flex-start -> Links und oben starten
Justify-content: Flex-end, align-itmes: Flex-end -> recht unten starten
Flex-center -> mitte
Flex-grow: 5; -> Element 5 Mal größer
Formatierungen:
Properties:
{color: <Farbe>}  Schlüsselwörter oder RGB Werte
{font-size}  Größe der Zeichen
HTTP-Protokoll:
Webclient und Server tauschen Nachrichten aus
Twitter Bootstrap
 Mobile First Ansatz
o Statt von der vollen Ausprägung der Website auszugehen und für mobile Geräte Inhalt wegzulassen
geht dieser Ansatz den umgekehrten Weg
o Die Site wird für mobile Geräte entwickelt und enthält auf größeren Geräten mehr Inhalt und anderes
Layout
 Grundlage ist immer ein Container
o <div class= „container“>.. </div>
 Container mit einem festen Rahmen, hat noch einen weißen Rand links und rechts (margin),
Container springt immer von einem zum anderen Device, zb ab 1200Px Xl, ab 991PX md usw,
o <div class=“container-fluid“>… </div>
 Container mit voller Breite, hat keine Spalten links und rechts
 In Container werden Zeilen und Spalten (Rows und Columns) platziert
o <div class=,,row“></div>, (am wichtigsten)
<div class=,,col-X-N“></div>
 Aufbau der Columns
o .col-X-N
 X gibt an, für welche Devices diese Klasse gilt
 N gibt an, wie viel Spalten (von den 12) diese Klasse abdeckt
 Beispiel
o <div class=“col-12 col-md-4 col-xl-2“>
 Je nach Größe des Devices, springt es von einem zum anderen
 Handy= col-12, Tablet=col-md-4, PC= col-xl-2
CSS Grid
 Setzt auf gitterförmige Einteilung des zur Verfügung stehenden Platzes mit folgenden Eigenschaften: Feste
(z.B.: Pixel) und flexible( z.B.: Fractions)
 Grid container
o Grundlage von CSS Grid ist immer ein Grid Container, der mittels der CSS Property display: grid oder
display: inline-grid erstellt wird
o Alle Kinder eines Containers sind dann sogenannte „grid-items“
 Grid Tracks
o Die eigentliche Einteilung des Grid erfolgt in sogenannte Grid Tracks
o Grid Tracks sind definiert als der Platz zwiscehn zwei der gedachten Gitterlinien, (Vgl. Zellen in Excel)
o Die CSS Properties grid-template-columns und grid-template-rows definieren das Grid in absoluten
Werten (explizites Grid)
 Wenn die definierte Zeilen und Spalten nicht ausreichen, wird das Grid automatisch erweitert
(implizites Grid)
 Mittels grid-auto-rows und grid-auto-columns kann der
Aufbau des impliziten Grids gesteuert werden
 Grid Einheiten
o Alle bisher behandelten Einheiten (absolute und relative)
können zur Definition von Grid Tracks verwendet werden
display: grid;
grid-template-columns: 33vw 20vw 10vw;
grid-template-rows: 2em 3rem;
o Zusätzlich kann die neue Einheit "fr" für Fraction, also Bruchteil, verwendet werden
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 2fr 2fr;
o Mittels der repeat() Syntax kann man mehrere identische Tracks erzeugen
 grid-template-columns: 1fr repeat(5, 3fr) 1fr;
 grid-template-rows: repeat(4, 2fr)
o grid-template-areas: „first title c“ “first d f“ “first e g“;
 #div2 { grid-area: first; }
 Grid Positionierung
Ablauf HTTP Request:

Client benötigt Ressource vom Server und öffnet TCP (Transportprotokoll) Verbindung zum Port 80
Art der Anfrage:

GET: über Web-Dokument
POST: Übermittlung Formulareingabe
HEAD: nicht Ressource, sondern Message-Header übermitteln, um festzustellen, ob sich Dokument geändert hat
Aufbau:
Message Header: Austausch Meta Informationen (Bsp.: Content-Type: text/html)
Leerzeile: Trennt Header vom Body
Body: Informationen übermitteln
Ablauf HTTP Response:

- Server erhält über TCP-Verbindung die Anfrage nach Web-Dokument
- Server entnimmt Dokument aus Dateisystem oder erstellt es
- Dokument wird an Client übermittelt
- Statuscode: Auskunft, wie Server die Anfrage behandelt hat
- Reason-Phrase: Kurzbeschreibung des Status der Anfrage
- Message-Header: Zusatzinformation für Client
- Message-Body: Nutzdaten
4 Klassen von Message-Headern:

- General-Header: Request- und Response-Nachrichten
- Request-Header: zusätzliche Informationen über sich selbst
- Response-Header: zusätzliche Informationen
- Entity-Header: Metainformationen zu Nutzdaten
Javascript
 Ist am weitesten verbretiet und alle nutzen es
 The Web language
 Most ubiquitious web langouage
 Läuft auf allen Plattformen (Cross Platform)
 High-level, intepretierte dynamische Sprache
o Müssen nicht selber zeichnen
o Müssen uns nicht um Netzwerkverbindungen kümmern
o Interpretiert: zur Laufzeit wird es gelesenen und wird dann ausgeführt
 Intepreter ist meist Teil eines Browsers
 JS hat keine festen Typen und unterstützt prozedurale, objektorientiert und funktionale Programmierung
 Achtung: Hat Nichts mit Java zu tun! -> Marketing Gag
o Das JAVA in JS ist lediglich ein Namensbestandteil, der unter der Lizenz von Oracle (früher SUN
Microsystems) benutzt werden darf. Allerdings nicht von jedem!
o Microsoft hat den Namensbestandteil JAVA nicht lizensiert und nennt seine Version von ECMAScript
JScript
JS Standardisierung
 ECMAScript war ein eher kleiner Stgandard mit folgenden Themen enthalten
 Textmanipulation, Datumsfunktionen, Reguläre Ausddrücke
 Wird immer größer
 Alles andere vor allem Input und Output wird von der sogenannten Host Umgebung gestellt
 Plug-ins brauchen wir fast

garnicht mehr
 Persistent gespeicherter Code
Nische interessiert uns nicht
 Temporär gespeicherter Code ist
wichtig: Javaskript
Redering der Website
• Im Browser wird der Quellcode und

alle damit verbundenen externen Stylesheets und externen JavaScript Dateien gelesen und zusammengefügt
• Das Ergebnis dieses Prozesses nennt man den DOM Baum
 Document Object Model (vgl. Web Techno im 2. Semester
• Ausgehend vom DOM Baum passiert das eigentliche Rendering der Website • èGrafische Ausgabe im Browserfenster
Einbinden von JS in HTML Code
Integrity: sicherheitmassnahme, Hashcode
JS im Browser
 Clientseitiges JS wird in zwei Phasen ausgeführt

o Zuerst werden alle Blöcke geladen und ausgeführt
 Die Reihenfolge der Ausführung ist per default streng sequentiell in der Reihenfolge, in der sie
im Quellcode eingebunden werden, kann aber geändert werden
o Nachdem alle Script Blöcke ihre Ausführung beendet haben beginnt die zweite Phase, die jetzt event-
basiert abläuf
 Events: Ereignisse, zb scrollen, fullscreeen , touchscreen
 Event-basierte Ausführung
o Web Brwoser definieren etliche Events auf verschiedenen Ebenen
 Event Listener stellen die Brücke her zwischen den Events und der auszuführenden Funktionalität
 Liste aller aktuellen Events: https://developer.mozilla.org/enUS/docs/Web/Events
 Schlüsselwörter: function, console.log,

document.getElementById
 Aneinander Reihung von Schlüsselwörtern ergibt sich eine
Funktion
 Mouseenter: Event, Clicked: was passieren soll
Folie 18-21: Einfache Berechnungen, Zeichnen, Form Valdierung, DOM Manipulation

PHP
<?php echo $title;?>
Formulare:
Get  Daten werden in URL übertragen
Post  Daten werden im http Request Body übertragen
Zusammenfassung Get und Post: $_REQUEST
Foreach: Alle Daten anzeigen lassen
<?php
foreach ($_GET as $key => $val) {
echo „$key => $val <br>”;
}
?>
MySQL:
Schnittstellen zu Datenbanken: mysqli und PDO
Bestandteile Programmiersprachen:
1. Variablen: Zuweisung: by Value

Platzhalter für Daten, beginnen mit $ $a = 3;
$zahl = 10; $b = $a;
$string = „10“; $b = 5;
$summe = $zahl + $string; echo “$a $b”
35
echo $summe.“<br>“;
echo substr ($summe, 0, 1). “<br>”; Zuweisung: by Reference
echo strlen ($zahl).”<br>“; $a = 3;
$b = &$a;
$b = 5;
echo “$a $b”
Variable Variablen:
$hello = “world”; echo $hello;  world
$$hello = “universe”; echo $$hello;  universe echo $world;  universe
Scope – Gültigkeitsbereich:
for ($i = 0; $i <10; $i++) {
$a = $a + $i;
2. Operatoren:
Increment Operator oder Vergleichsoperator
Arithmetische Operatoren:
+$a Identity Konversion des Inhalts zu integer oder float
$a % $b Module Rest der Division
$a ** $b Exponentiation „hoch“
Bitweise Operatoren: Vergleichsoperatoren:
I Or == gleich
^ Xor != nicht gleich
~ Not === identisch
<< Left shift !== nicht identisch
Logische Operatoren: (short-circuit)

werden mehrere Bedingungen verbunden, hört
Evaluation auf, wenn eindeutige Aussage gemacht werden kann  (true II ($a = 3))
Verschiedene Operatoren:
@ Error Control Fehler werden nicht angezeigt
3. Ausdrücke:
$a =5;
 können gleichzeitig Anweisungen sein
4. Anweisungen:
kleinste ausführbare Einheit einer Programmiersprache
Zuweisungen (a=5)
Blöcke ({…})
Kontrollstrukturen (if…then…)
Funktionsaufrufe (read())
Kontrollstrukturen – bedingte Anweisungen:

if ($i ==3) {
echo „Variable ist 3“;
} else {
echo „Variable ist nicht 3“;
}
Switch Statements:
switch ($i) {
case ’A’: echo “Option A aktiv.";
break;
case ’B’: echo “Option B aktiv.";
break;
case ’C’: echo “Option C aktiv";
break;
5. Kontrollfuß:
Schleifen: wiederholte Abarbeiten von Befehlen (abweisende (kopfgesteuert) und annehmende (fußgesteuert)
Schleifen
For-Schleifen:
for ($i = 0; $i < 5; $i++) {
echo $i;
}
Foreach-Schleifen:
$a = array (1,2,3,4);
foreach ($a as $val) {echo $val;}
While-Schleifen:
§i = 0;
while ($i <5) { echo $i++; }
Do-While-Schleifen:
$i = 0;
do { echo $i++ }
while ($i < 5);
Back and Continue:

Ablauf der Schleifen direkt beeinflussen
1. break: bricht Durchlauf ab und fährt mit Code, der auf die Schleife folgt, fort
2. break <N>: z.B. break <2> verlässt aktuelle Schleife und die erste äußere Schleife
3. continue: springt ans Ende des Durchlaufes. Erst Bedingung evaluieren und Durchlauf neu starten, oder
Durchlauf direkt neu starten
4. continue <N>: Ausführung bei äußeren Schleife fortsetzen

6. Funktionen:
 wiederverwendbare Teile von Programmcode, die Argumente erhalten und Werte zurückliefern
Bsp.:
function funktion () {
echo „Hallo Welt“;
}
funktion ();
Function funktion ($name = „Rolf“) {

echo „Hallo $name“;
}
funktion (), funktion („Sandra“);
7. Typsystem:
printf() ist eine Funktion zur formatierten Ausgabe von Datentypen
- Generelle Syntax:
printf(„<Formatstring>“, Argument1, Argument2,…);
 printf(„Hallo %s!<br>“, $name);
9 verschiedene Datentypen:
Scalar: Boolean: Wertebereiche TRUE oder FALSE
Integer: Ganzzahlen, zu groß für Wertebereich des Datentyps, wird er float
Float: Gleitkommazahlen, Vergleich kann falsch sein
String: Sequenz von Zeichen, nur ein Byte groß
- Single Quote:
• $s1 = ‚Hallo Welt‘;
• echo $s1;
Hallo Welt
• $s2 = ‚Hallo Welt\n Guten Morgen‘;
• echo $s2;
 Hallo Welt\n Guten Morgen
• $name = ‚Rolf‘;
• $s3 = ‚Guten Morgen $name‘;
• echo $s3;
 Guten Morgen $name
- Double Quote
• $s1 = „Hallo Welt“;
• echo $s1;
 Hallo Welt
• $s2 = ‚Hallo Welt\n Guten Morgen‘;
• echo $s2;
 Hallo Welt Guten Morgen
• $s3 = ‚Guten Morgen $name‘;
• echo $s3;
 Guten Morgen Rolf
- Here Quote
$s1 = <<<EOF
Hallo $name<br>
Wie geht´s?
EOF
echo $1;
1. Hallo Rolf Wie geht´s?
- Now Doc
Variablen Parsing: Ersetzung von $variable in Strings

Varianten:
Simple Syntac: Parser liest ab einem $ solange bis kein Zeichen kommt, dass Namen begrenzen kann
Bsp.: $eis = „Mango“ „Ich mag ein $eis Eis“ // „Ich mag ein Mango Eis“
Complex Syntax: Bsp.: „Ich mag ein {$eis[4][3]}“
Zugriff ist auch auf einzelne Zeichen innerhalb des Strings möglich
• $str = „123456789ABCDEFG“; echo $str[3]; echo $str[11];
String Konkatenierung:
• $a = „Hallo“; $b = „Welt“; echo $a.$b;
String Länge:
• $a = „Hallo Welt“; echo strlen($a);
5. Verbund array: Felder, die Index nutzen, um jeweiligen Elemente anzusprechen

Bsp.: $a[0] = „Erstes Element“;
object: OOP Klassen sind ein eigener Datentyp
callable
6. Special resource
NULL
CSS – Selektoren
Selektor (Bsp.) Ausgewählte(s) Element(e)

Einfache div Alle <div> Elemente
/
allgemei
ne
Selektore
n
#cool Alle Elemente mit id=“cool“
p strong Alle <strong> Elemente, die innerhalb eines
<p> sind
#cool span Alle <span> Elemente, die innerhalb von
Elementen mit id=“cool“ sind
.table Alle Elemente der Klasse table
(class=“table“)
Class #big.wide Alle Elemente mit id=“big“, die der Klasse
combinat wide angehören (class=“wide“)
or
Comma p, .fun, a Alle <p> und <a> Elemente und alle
Combinat Elemente der Klasse fun (class=“fun“)
or
Universal * Alles
Selektor
p* Alle Elemente innerhalb eines <p>
Sibling div + a Alle <a> Elemente, die einem <div> direkt
Selektore folgen
n
apple ~ banana Alle <banana>, die irgendwann nach einem
<apple> kommen
Child apple > banana Alle <banana>, die direkte Kinder von
Selektore <apple> sind
n
div p: first-child Alle <p> Elemente, die das erste Kind eines
<div> sind
span: only-child Alle <span> Elemente, die das einzige Kind
eines anderen Elements sind
span: last-child Alle <span> Elemente, die das letzte Kind
eines anderen Elements sind
p: nth-child(x) Das x-te <p> Element
: nth-last-child(x) Alle x-letzten Kind Elemente
…of-type span: first-of-type Das erste <span> in irgendeinem Element
Selektore
n
:nth-of-type(An+B) Alle A-ten Elemente, beginnend bei B
(oder statt „An+B“ nur eine Zahl oder
„odd“
bzw. „even“)
:only-of-type Das einzige Element seines Typs innerhalb
eines anderen Elements
div: last-of-type Das letzte <div> in jedem Element
Empty div: empty Alle leeren <div> Elemente (bspw. für
Selektor Formulare nützlich)
Negation :not(#fancy) Alle Elemente, die nicht die id=“fancy“
haben
Attribut a[href] Alle <a> Elemente, die das Attribut href
Selektore oder für best. Werte: a[href= “xy“] haben (href=“…“, bzw. href=“xy“)
n
[attribute^=”Sa”] Alle Elemente, die das Attribut „attribute“
haben und dessen Wert mit „Sa“ anfängt
(attribute=“Sa…“)
[attribute$=”value”] Der Wert von „attribute“ endet mit
Bsp.: img [src$=”.jpg”] „value“
im Bsp: Alle Bilder im jpg-Format
[attribute*=”value”] Der Wert von „attribute“ muss irgendwo
„value“ enthalten

Zusammenfassung Web

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Zusammenfassung Web

Hochgeladen von

Copyright:

Verfügbare Formate

cssKomplettzusammenfassung Web-Programmierung 1

-Tätigkeit, C omputerprogramme zu erstellen, Aktivitäten und Analysen, Entwicklung von Algorithmen

Vorgehensmodelle: Wasserfallmodell, V-Modell, erweitertes Wasserfallmodell, Agile Methodology

Qualitätskriterien: Portability, Functionality, Reliability, Usability, Efficiency, Maintainability

2. WWW und HTML

Symbole, z.B.: Buchstaben

Hypermedial: enthalten nicht nur Text, sondern auch andere Medien

Anwendung der SGML (Structured Generalized Markup Language)

Zur Strukturierung und Formatierung von Web Inhalten

Aktuelle W3C Recommendation: html 5.1

Struktur eines Web-Dokuments

HTML = Hypertext Markup Language

Head: title, meta (name=keywords), externe Dateien (Stylesheets)

Analyse, welche Informationen man darstellen will,

o Tr = Tabellenzeile, Td= Tabellenzelle, thead= Tabellenüberschrift

 DIV (Block-Element) & SPAN (Inline-Element) -> Ohne Formatierung sinnlos

 Listen (ungeordnete Listen ul [li], deskriptive Liste dl [dt,dd])

 Bilder (src, width, height…)

Elemente für Formulare:

Metadata: Präsentation, Verhalten, Verhältnis des Dokuments zu anderen

Sectioning: Gültigkeitsbereich von headings und footers (artice, section)

Heading: Überschriftenhierarchie (h1)

Phrasing: Enthalten nur Text (a, br,…)

Embedded: eingebettete Inhalte (audio, img,…)

Interactive: interaktive Inhalte (button, textarea)

Palpable: nicht leerer Content (strong, span, table,…)

Gesamtbreite: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Gesamthöhe: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-

Maßeinheiten: HTML kennt relative und absolute Maßangaben

Absolute Maßangaben: cm Zentimeter, px Pixels

Unterschied zwischen Inline und Block-level Elementen:

Style Vererbung: Elternelemente im DOM vererben an Kind Elemente

CSS - Cascading Stylesheets

Formatierungssprache für strukturierte Web-Dokumente

Ziel: Trennung von Formatierung und Inhalt

Beispiel: H1 {color: green;} Deklaration

Selektor Eigenschaft Wert

Innerhalb eines HTML Elements:

Häufig Ersetzung durch Media Queries: <link rel="stylesheet" media="(max-width: px)"/>

ID: Selektiert alle Elemente anhand der ID

Universal: Alle Elemente, Beispiel: *

Exact Value: [data-fhws=“Begrüßung“]

Suffix: Selektiert alle, die mit dem Wert aufhören, zb [data-fhws$=“Inhalt“]

Selection:Selektiert, wenn du etwas auswählst, zb ::selection{}

Kombinierte Selektoren: Gruppiert ELemente

Group: selektiert alle genannten Elemente; A, B, z.B.: h1, h2, h3 { }

Descendant: Abkomme von Eltern, Großeltern, A B. z.B.: div span {}

CSS= nur physikalische Formatierungen

CSS ausgewählte Formatierungen

 Du kannst Schriftarten auf deine eigene Website einbinden

Regeln für ein Element

Ist es ein inline, block doer flexbox element?

- border: 2px solid lime;

 Bennenung Parameter bleibt gleich, nur Achsenrichtung unterscheides sich

Row: nebeneinander, zeile

Justify-content: Flex-start, align-itmes: Flex-start -> Links und oben starten

Justify-content: Flex-end, align-itmes: Flex-end -> recht unten starten

Flex-center -> mitte

Flex-grow: 5; -> Element 5 Mal größer

Ablauf HTTP Request:

Art der Anfrage:

Message Header: Austausch Meta Informationen (Bsp.: Content-Type: text/html)

Leerzeile: Trennt Header vom Body

Body: Informationen übermitteln