WBA

Vervollständigen Sie folgende Aussagen zu CSS-Selektoren.

• Einen Selektor der Form p { } nennt man ........................................
• Ein ID-Selektor beginnt immer mit dem .......... Zeichen.
• .......... ist der Selektor der alle Html-Typen selektiert.
• .................... selektiert Elemente mit der Klasse "wichtig".

Vervollständigen Sie folgende Aussagen zum alternativen Boxmodell.

Mit der Deklaration ................................................. aktivieren sie das alternative Boxmodell für ein Element.
In die Höhen- und Breitenangaben werden Werte für die CSS-Eigenschaft ................................................. und ................................................. mit einberechnet Die CSS-Eigenschaft ................................................. ist Teil des Boxmodells, aber wird nicht mit in die Höhen- und Breitangabe im alternativen Boxmodell mit einberechnet.

Schreiben Sie zu folgenden Aussagen die zugehörigen CSS-Anweisungen.

Die Hintergrundfarbe vom body-Element soll blau sein. Und zwar mit folgenden Farbanteilen: 0% Rot, 0% Grün, 100% Blau. Bitte geben Sie den Farbwert in hexadezimaler Schreibweise an:

Das body-Element soll 100% breit sein:

Die Schriftgröße von allen p-Elementen soll 12 Pixel betragen.

Die Schriften aller Elemente mit der Klasse "wichtig" sollen rot eingefärbt werden. Und zwar mit folgenden Farbanteilen: 0% Rot, 100% Grün und 20% Blau. Geben Sie den Farbwert mit prozentualen Farbanteilen an.

Nennen Sie Unterschiede zwischen Block- und Inline Elementen, sowie jeweils ein HTML-Element, welches standardmäßig zu dieser Gruppe gehört.

Skizzieren und erläutern Sie das Standard-Boxmodell für ein Block-Element.

Beschreiben Sie drei unterschiedliche Möglichkeiten um CSS in eine HTML Datei einzubinden.

Warum ist es sinnvoll bei der CSS-Eigenschaft 'font-family' mehere durch Kommata getrennte Werte anzugeben?

Wofür steht die Abkürzung CSS und was sind die Aufgaben von CSS?

Welche der folgenden Positions-Anweisungen sind gültige CSS3 Regeln?

[   ] position: fixed;
[   ] position: bottom;
[   ] position: static;
[   ] position: sticky;
[   ] position: scroll;
[   ] position: relative;
[   ] position: clear;

Alle folgenden Regeln treffen auf das selbe p-Element zu. Sortieren Sie die folgenden Regeln nach ihrer Spezifizität von 1-6 (6 ist die höchste Spezifizität, also am spezifischsten).

[   ] section p.first-paragraph { color: red; }
[   ] p { color: green; }
[   ] body p { color: blue !important; }
[   ] p#special { color: yellow; }
[   ] header.header p.last-element { color: black; }
[   ] p.first-paragraph.last-element { color: grey; }

Welche Elemente werden durch folgende CSS-Regel angesprochen?

Der folgende Quelltext erzeugt im Browser Variante A. Markieren Sie die CSS Anweisungen, um Variante B zu erzeugen.

A: Alle Elemente untereinander, gleich groß

B: Alle Elemente nebeneinander mit linkem und unterem, rechtem Seitenabstand, gleich groß

[   ] div { width: 300px; }
[   ] div { float: left; }
[   ] div { text-align: right; }
[   ] div { padding-bottom: 10px; }
[   ] div { margin-bottom: 10px; }
[   ] div { position: absolute; }
[   ] div { margin-right: 10px; }
[   ] div { float: right; }

Mit welchem Schlüsselwort wird die Spezifität einer CSS-Anweisung erhöht, so dass sie von anderen Anweisungen nicht überschrieben werden kann?

Vervollständigen Sie folgende Aussagen bezüglich der Anordnung von Elementen.

Elemente mit einem ......................... z-index als andere liegen im Vordergrund.
Wenn sich zwei Elemente mit gleichem z-index überlagern, dann liegt das Element was im DOM als erstes definiert ist ......................... dem Element was als letztes definiert ist.
Mit den CSS-Eigenschaften .........................:left; und .........................:right können Elemente nebeneinander angeordnet werden. Um das Umfließen von Elementen zu stoppen setzt man die CSS-Eigenschaft .................... ein.

Vervollständigen Sie folgende Aussagen zu Kombinatoren.

Mit Kombinatoren kann man HTML-Elemente in einem speziellen ......................... ansprechen.
Der .........................-Kombinator wählt alle direkten & indirekten Nachfahren eines Elements aus.
Einen Kombinator der Form "p + p" nennt man .........................
......................... ist die korrekte Syntax für die Verknüpfung zweier p- Elemente mit dem Geschwister-Kombinator.

Nennen Sie mindestens drei Pseudo-Klassen und beschreiben Sie, wann diese greifen.

Nennen Sie ein Beispiel für ein Pseudo-Element und beschreiben Sie ein Einsatzgebiet für diese Art von Element.

Beschreiben sie die Unterschiede zwischen position:static und position:absolute.

Beschreiben Sie die Unterschiede zwischen den Werten hidden, scroll und auto für die CSS-Eigenschaft "overflow"".

Schreiben Sie CSS-Code der folgende Bedingungen erfüllt.

1) Die Schriftfarbe aller Elemente ist schwarz.

2) Alle Links sind unterstrichen.

3) Wenn mit der Maus über ein Link gefahren wird, erhält dieser einen blauen Hintergrund.

4) Alle Button-Elemente sollen einen inneren Abstand von 10px, einen grauen Hintergrund und einen 2px breiten durchgängigen schwarzen Rahmen haben.

Wofür kann Javascript genutzt werden?

[   ] Auf Userinteraktionen reagieren
[   ] Mit dem Server kommunizieren (bspw. Autocompletion bei Eingabefeldern)
[   ] Programme auf dem Client starten
[   ] Satelliten programmieren
[   ] Eingabedaten von Formularen validieren
[   ] Browserbasierte Spiele erstellen
[   ] Daten auf der Festplatte des Servers speichern

Was ist Javascript?

Welche Aussagen bezüglich Variablennamen sind korrekt?

[   ] Variablennamen dürfen Leerzeichen enthalten
[   ] Variablennamen dürfen nicht mit einer Zahl, einem Sonderzeichen oder Satzzeichen anfangen
[   ] Variablennamen dürfen nicht mit einem Javascript-Schlüsselwort übereinstimmen
[   ] Variablennamen dürfen keine Ziffern enthalten
[   ] Variablennamen sind case sensitive

Ordnen Sie die folgenden Variablendeklarationen ihrem korrekten Datentyp und Inhalt zu.

1. var myString;
2. var myString = 1;
3. myAnotherString = "Das ist eine schöne Klausur";
4. var myString = '1';

[__] Typ: undefined, Wert: undefined;
[__] Typ: Number, Wert: 1;
[__] Typ: String, Wert: 1;
[__] Typ: String, Wert: "Das ist eine schöne Klausur";
[__] Typ: Number, Wert: "Das ist eine schöne Klausur";
[__] Typ: String, Wert: undefined;

Ordnen Sie die Begriffe den korrekten Codeschnipseln zu.

1. Bedingte Anweisung
2. Schleife
3. Funktion
4. Objekt 

[__] 

if (Bedingung) { Anweisungen; } else { Anweisungen; }

[__] 

while (Bedingung) { Anweisungen; }

[__] 

function steuer ( betrag, satz) { var mwst = betrag * satz / 100; var summe = betrag + mwst; return summe; }

[__] 

var address = new Object(); address = { lastName: "Meier", zipcode: "50678", number: 5, street: "An der Bottmühle" }

Bitte ergänzen Sie folgenden Lückentext sinnvoll. Benutzen Sie dazu die vorgegebenen Begriffe.

serverseitig, Geschwindigkeit, Laufzeit, Struktur, HTTP-seitig, Layout, Funktion, HTML, CSS, Umgebung, clientseitig, Entstehungszeit

HTML, CSS und Javascript bieten dem Entwickler die Möglichkeit ........................................ von ........................................ und ........................................ zu trennen. Javascript lässt sich in ........................................ -Dokumenten einfach integrieren und kann dessen ........................................ und Aussehen zur ........................................ verändern. Javascript wurde früher nur ........................................ eingesetzt, kann mittlerweile aber auch ........................................ verwendet werden.

Folgender Codeschnipsel ist gegeben. Ordnen Sie den einzelnen Teilen die entsprechenden Begriffe zu.

      1                 2                        3

___|__     _____|_____     _____|____

/          \  /                       \  /                    \

function berechneSteuer ( betrag, satz ) {

                                                  ———+

var mwst = betrag * satz / 100;             |

var summe = betrag + mwst;                | -- 4

return summe;                                      |

                                                  ———+

}

…

var brutto = steuer ( 200, 16 ); ------------5

Auf welchem Standard basiert Javascript?

Untersuchen Sie den Codeschnipsel auf Syntaxfehler. Geben Sie die Fehler mit Zeilennummer an und markieren Sie diese im Code. Begründen Sie kurz warum es sich um Syntaxfehler handelt.

Welchen Datentyp hat die Variable 'summe' nachdem die Funktion in Zeile 5 aufgerufen wurde? Begründen Sie ihre Aussage.

Nennen Sie jeweils zwei primitive, spezielle und referenzierte bzw. zusammengesetzte Datentypen und beschreiben Sie kurz deren Funktion.

Sie haben die folgende HTML-Struktur vorgegeben:

Erstellen Sie einen DOM-Baum.

11b) Markieren Sie in der Zeichnung eine Geschwisterbeziehung. 

11c) Markieren Sie in der Zeichnung eine Kind-Eltern-Beziehung. 

11d) Markieren Sie in der Zeichnung den Wurzelknoten. 

Was bedeuten die Akronyme DOM und BOM und worin unterscheiden sich die beiden Konzepte?

Wofür kann man Javascript-Events nutzen?

Mit welcher Javascript-Anweisung kann man auf das DOM-Element mit der id "firstname" zugreifen?

Analysieren Sie folgenden HTML-Code. Mit welchem Befehl kann in der ungeordneten Liste auf den Inhalt des zweiten Listenpunkts zugegriffen werden?

Ordnen Sie die folgenden Anweisungen den korrekten Befehlen zu.

1. Erzeugt ein li-Element.
2. Fügt ein Element einer Liste hinzu.
3. Gibt das erste Element einer Liste zurück
4. Löscht ein Element aus einer Liste

[__] document.getElementsByTagName("ul")[0].removeChild(listElement);
[__] document.createElement("li");
[__] document.getElementsByTagName("ul")[0].children[0];
[__] document.getElementsByTagName("ul")[0].appendChild(listElement);

Erläutern Sie kurz was folgende Codesnippets machen.

var text = document.getElementsByTagName("div")[1].innerHTML;

var align = div1.getAttribute("align");

alert('Hello World!');

Bitte ergänzen Sie folgenden Lückentext sinnvoll. Benutzen Sie dazu die vorgegebenen Begriffe.

Begriffe: Document Object Model – Document Data Model – Data Oriented Manual – Leitplanke – Kopplung – Schnittstelle – Stadtplans – Baumes – Tortendiagramms – CSS-Dateien – HTML-Elemente – verändert – ersetzt – hinzugefügt – entfernt – eingefärbt

Das DOM, ausgeschrieben ..............................................., ist die Spezifikation einer ................................................. für den Zugriff auf HTML- und XML-Dokumente. Die Struktur des DOMs ähnelt der eines/einer .................................................. Über bestimmte Methoden können auf .................................................. zugegriffen werden. DOM-Manipulationen können mit Methoden wie innerHTML (über die der komplette Inhalt eines Elements .................................................. werden kann) und replaceChild()(die ein Kindknoten ..................................................) vorgenommen werden. Über die Methode removeAttribute() kann ein HTML-Attribut ..................................................werden.

Beschreiben Sie kurz die einzelnen Teile der Funktion.

document.getElementById('textfeld').onkeyup = function() { . . . };

                 \___________________/ \______/    \____________/

                                     |                           |                        |

                                    1                          2                       3

1 2 3

Gegeben ist folgender HTML-Code. Ergänzen Sie die Funktion 'check' dahingegend, dass sie überprüft, dass die Felder für E-Mail-Adresse und Nachricht ausgefüllt sind. Wenn das der Fall ist soll die Funktion 'true' und ansonsten 'false' zurückgeben.