Losungen zu Probeklausuraufgaben PDF

Preview

Summary

Download Losungen zu Probeklausuraufgaben PDF

Description

Wodurch

unterscheiden sich die HTML-Elemente div, nav, aside und section? div: allgemeines Element zur Gruppierung von Elementen nav: Liste mit Hyperlinks (Navigationsbereich) aside: Randbemerkungen mit schwachem Bezug zum Hauptinhalt section: Elemente werden zu einem Textabschnitt gruppiert -

All diese Elemente dienen zum Gruppieren von Elementen, sollen dem Inhalt aber eine semantische Bedeutung geben

Erläutern Sie den Unterschied zwischen den Positionierungsarten "absolute", "fixed", "relative" und "static". static: Standard-Einstellung, Seite folgt dem „normalen Fluss“ in dem Block-Boxen untereinander und Inline-Boxen nebeneinander dargestellt werden fixed: fixiert ein Element im Browser, es bleibt auch beim Scrolling der Seite immer an derselben Position, fixierte Elemente befinden sich nicht mehr im normalen Fluss relative: Element bleibt im normalen Fluss, kann aber verschoben von seiner normalen/eigentlichen Position dargestellt werden absolute: Element ist nicht mehr im normalen Fluss und kann verschoben bzw. neu positioniert werden, Positionsangaben orientieren sich an der Position des nächsten positionierten Vorfahren-Elements -

Alle Elemente die positioniert sind (fixed, relative, absolute) können andere Elemente verdecken oder durch sie verdeckt werden

Wie stellen Sie ausschließlich mit CSS-Regeln sicher, dass die Druckausgabe einer Webseite im body-Bereich einen andere Schriftart verwendet? Mit einer Media-Regel im CSS-Dokument: @media print { body { font-family: andere Schriftart; } } Erklären Sie die Verarbeitung von DOM-Ereignissen. Welche Möglichkeiten eröffnet das Event Bubbling?

Das DOM besteht aus Elementen, welche man mit Event Handlern ausstatten kann. Wenn ein bestimmtes Event (Ereignis) eintritt, führt der Event Handler eine Funktion aus, welche das Element im DOM entsprechend der Anweisungen in der Funktion verändert. Das Event Bubbling ermöglicht es, Ereignisse, die ein verschachteltes Element betreffen, aus einem höher gelegenen Element zu überwachen und bei Bedarf auszuführen. Dies ermöglicht bei vielen gleichförmigen Elementen (z.B. Menüs oder Listen) einen einzigen Event Handler zu implementieren, der die gewünschte Funktion für die unterliegenden Elemente ausführt, welche man ansonsten alle einzelnd ansprechen müsste. In einer HTML-Tabelle (Element table), die Spaltenüberschriften verwendet, soll der Text der ersten Zeile unterhalb der Spaltenüberschriften in blau dargestellt werden. Die Zellen in der ersten Spalte sollen gelb eingefärbt werden. Geben Sie die passende CSS-Stilregel an. Verwenden Sie für den CSS-Selektor Erweiterungen aus CSS3! Class- und Id-Selektoren dürfen NICHT verwendet werden! tbody tr:nth-child(1) { color: blue; } td:nth-child(1) { background-color: yellow; }

Erläutern Sie den Begriff "Semantic Web". Das Semantic Web erweitert das Web, um Daten zwischen Rechnern einfacher austauschbar und für sie einfacher verwertbar zu machen. Hierzu werden die Inhalte mit weiterführenden Informationen verknüpft. Das Semantic Web beschreibt dazu konzeptionell einen „Giant Global Graph“. Dabei werden sämtliche Dinge von Interesse identifiziert und mit einer eindeutigen Adresse versehen als Knoten angelegt, die wiederum durch Kanten (ebenfalls jeweils eindeutig benannt) miteinander verbunden sind. Die Gesamtheit all dieser Kanten entspricht dem globalen Graphen. Geben Sie an, wie Sie mit Hilfe der DOM-Methode querySelectorAll jeder zweiten Zeile einer Tabelle eine Ereignisbehandlungsmethode für ein Mausklickevent zuweisen können. function init() { var list = document.querySelectorAll("tbody tr"); for (var i = 0; i < list.length; i++) { var element = list[i]; if (i % 2 == 0) { element.onclick = whenClicked }

} } Erläutern Sie die Verwendung von "Flex-Boxes" (CSS-Stil display: flex). Flexbox erlaubt es, Elemente innerhalb eines flexiblen Containers beliebig aufzureihen (entweder horizontal nebeneinander oder vertikal untereinander). Die Flex-Items werden nebeneinander dargestellt. Die Größe der Flex-Items ist nicht durch CSS festgelegt, sondern wird vom Browser selbst ausgewählt. CSS-Befehle für Flexboxen: display: flex flex-direction

flex-wrap

Macht das Element zu einem Flex-Container für die darunter liegenden Flex-Items. Richtung der Hauptachse, an der die Elemente aufgereiht werden. Für dieses Attribut gibt es vier Werte: row: (Standardwert) die Hauptachse entspricht der Schreibrichtung, alle Items werden in Schreibrichtung angeordnet row-reverse: alle Items werden entgegengesetzt zur Schreibrichtung angeordnet column: die Hauptachse entspricht der Blockachse, alle Items werden senkrecht zur Schreibrichtung angeordnet column-reverse: wie column, nur in umgekehrter Reihenfolge der Items Entscheidet, ob sich Flex-Items der Breite des Browser-Fensters anpassen sollen oder ihre vorgegebene Breite beibehalten und es zu einem Zeilenumbruch kommt, falls eine Zeile nicht groß genug für alle Items ist. Es gibt folgende Werte: nowrap: flexible Elemente liegen alle in derselben Reihe, auch wenn dazu der Platz fehlt. - wrap: flexible Elemente brechen, wenn nötig, senkrecht zur Schreibrichtung um. - wrap-reverse: wie wrap, aber in die andere Richtung - initial - inherit Fasst flex-direction und flex-wrap in einer Eigenschaft zusammen. Man gibt hier -

flex-flow

einfach nur einen der möglichen Werte dieser Attribute an. Legt die Reihenfolge der Flex-Items unabhängig von ihrer Reihenfolge im HTMLMarkup fest. Zu vergebene mögliche Werte:

order

-

-

ganze Zahl: Standardwert ist 0. Sie können entweder eine Reihenfolge für alle Flex-Items festlegen oder ein Element mit einem negativen Wert order: -1; nach vorne positionieren. initial inherit

Erläutern Sie den Begriff Template-Engine und zeigen Sie, wie man diese bei WebApplikationen einsetzt. Eine Template-Engine ist eine Software, die ein Template verarbeitet und bestimmte Platzhalter darin ähnlich wie bei einem Formular durch jeweils aktuelle Inhalte ersetzt. Dadurch ist es möglich die Darstellung der Daten beispielsweise durch Kontrollstrukturen wie z.B. Schleifen zu beeinflussen, was ansonsten in HTML und CSS nicht möglich wäre. Erläutern Sie den "REST"-Ansatz. REST (Representational State Transfer) ist ein Programmierparadigma für Web-Services. Die Kernidee bei REST ist das Konzept der Ressource, wobei eine „Ressource“ als so genannter Medientyp abgebildet wird, sozusagen die Repräsentation der Ressource ist. Alles was in REST adressierbar ist, ist eine Ressource. Jede Ressource lässt sich dabei über ein URI identifizieren. Zudem ist REST zustandslos, wodurch dich REST-Services einfach skalieren lassen. Es lassen sich mehrere Anfragen eines Clients problemlos auf verschiedene Server verteilen. -

Repräsentation: Versetzt Client in einen Zustand Zustand: Durch angeforderte Ressource, die als Repräsentation geliefert wird Übergang: in einen neuen Zustand durch Anforderung einer neuen Ressource (z.B. per Hyperlink)

Erläutern Sie die für Web-Anwendungen und Websites spezifischen Testverfahren. -

Link-Test: Fehlerfreiheit, Rechtmäßigkeit von internen und externen Links, Checklisten verwenden, Link-Checker, z.B. vom W3C, einsetzen Cookie-Test: Fachliche, technische Funktionalität eingesetzter Cookies prüfen (hier sind Ergänzungen notwendig: WebStorage etc.) Plugin-Test: Fehlerfreie und korrekte Benutzerführung im Hinblick auf benötigte Plugins prüfen Sicherheitstest: Prüft die Eignung, Korrektheit, Unumgänglichkeit und Wirksamkeit der eingesetzten Sicherheitsmaßnahmen

Erläutern Sie den Einsatz des Entwurfsmusters „Publish-Subscribe“ bei der Realisierung von Web-Clients mit Hilfe der Javascript-Bibliothek „EventService“ (es.js). Pusblish-Subscribe arbeitet nach dem Entwurfsmuster Beobachter. Bei diesem Entwurfsmuster können sich Dienste für den Erhalt von Nachrichten an und abmelden. Wenn sich ein Dienst angemeldet hat, bekommt er automatisch nach einer Status Änderung den neuen Zustand des Statuses. Was sind Web-Services? Zeigen Sie anhand des Dienstes Amazon-S3 wie ein Web-Service mit dem REST Ansatz zur Verfügung gestellt werden kann. Ein Webservice ist ein Dienst, der über ein Netzwerk wie das Internet angesprochen werden kann. Er stellt eine Schnittstelle für die Maschine-zu-Maschine-Kommunikation zur Verfügung, über die Daten ausgetauscht und auf entfernten Computern Funktionen aufgerufen werden.

Geben Sie das HTML5-Markup im body-Bereich und die CSS-Stilregeln an, um mit dem Flexbox-Ansatz ein Layout zu erzielen, das aus folgenden horizontalen Bereichen besteht: - Kopfbereich - Hauptbereich, vertikal unterteilt in 3 Bereiche (Links, Mitte, Rechts) - Fußbereich. -

siehe „Frage14.html“

In einer Anwendung zur Verwaltung eines Vereins werden die Klassen "Mitglied" und "Veranstaltung" verwendet. Die Teilnahme von Mitgliedern bei Veranstaltungen wird als Verweis im jeweiligen Veranstaltungsobjekt gespeichert. Zeigen anhand der Anfragen (Requests), wie Sie mit dem Python-Framework "cherrypy" mit dem Verfahren "ObjectDispatching" - für die Klasse "Mitglied" das Erzeugen, Lesen, Ändern und Löschen einzelner Objekte dieser Klasse realisieren können - für die Klasse "Veranstaltung" die Teilnahme von Mitgliedern bei einem Veranstaltungsobjekt eintragen bzw. entfernen können. Spezifizieren Sie dazu: - die Pfade der erforderlichen Anfragen (also ohne Protokoll und Server)

- die Signaturen der erforderlichen Python-Klassen - die Ergebnisse der Anfragen (d.h.: was wird vom Server an den Client ausgeliefert) Für Mitglieder: Methode GET GET

URI /mitglied/ /mitglied/:mid

POST

/mitglied/+Daten

PUT DELETE

/mitglied/:mid +Daten /mitglied/:mid

Ergebnis Alle Mitglieder anfordern. Einzelnes Mitglied anhand der :mid anfordern Neues Mitglied speichern und :mid zurückgeben Mitglied mit ID :mid ändern Mitglied mit ID :mid löschen

Für Veranstaltung: PUT

DELETE

class Mitglied(object): exposed = True def __init__(self): def GET(self, id=None): def POST(self, id): def PUT(self, id): def DELETE(self, id):

class Veranstaltung(object): exposed = True def __init__(self): def POST(self, id): def DELETE(self, id):

/veranstaltung/:vid +Daten

Zuweisung der Mitglieder zu der Veranstaltung mit der ID :vid /veranstaltung/:vid +Daten Löschen von Mitgliedern in der Veranstaltung mit der ID :vid...