komplett
-
- 1 / 27
-
Cartes-fiches
Was ist der Unterschied im Ergebnis von document.getElementsByTagName('p') und document.querySelectorAll('p')?
getElementsByTagName returniert eine live Node-List, das sich ändert wenn sich das DOM ändert. querySelectorAllgibt eine statische Node-List zurück. Ausserdem ist getElementsByTagName schneller.
Welche Aussage zum Event Bubbling ist NICHT korrekt:
Das Event Bubbling
Handelbars Template-Scripts sollten mit dem foldenden Type aufgerufen werden:
Was macht der folgende JQuery Aufruf?
$(function () {
// do something
});
Nachdem der DOM geladen wurde, wird die angegebene Funktion (do something) ausgeführt. Der Aufruf ist macht dasselbe wie
$(document).ready(function () {
// do something}
);
Welchen jQuery event gibt es nicht?
Nenne je zwei Vor- und Nachteile wenn man jQuery (oder andere Libraries) von einem CDN einbindet statt vom eigenen Server.
- Die Datei kann vom geografisch nächsten Server geladen werden => bessere Performance. Vor allem bei globalen Seiten wichtig.
- Die Chance, dass die Datei...
Welches der folgenden Beispiele ist nicht in Jquery aufzufinden?
jQuery - nenne einen Befehl, der die verwendete Version ausgibt.
Mögliche Antworten:
jQuery.fn.jquery
$.fn.jquery
jQuery().jquery
Was ist KEIN jQuery Syntax?
Wie würden die folgenden zwei Zeilen mit dem Benützen von JQuery lauten?
document.getElementsByClassName("test").innerHTML = functionCreate(hello);
document.getElementById("testButton").removeEventListener("click",ClickEventHandler);
$(".test").html(functionCreate(hello));
$("#testButton").off("click",ClickEventHandler);
wichtig bei JQuery wenn eine ClassName angewählt wird, braucht es denn . vor dem ClassName, wird eine ID angewählt braucht es ein # davor
$('ul#list').find('li').on('click', function(){alert();});
$('ul#list').append('<li>Something</li>');
In diesem Beispiel bewirkt ein Klick auf das letzte Listenelement nicht, da dieses mit .append hinzugefügt wurde und noch nicht existiert hat, als die eventHandlers hinzugefügt wurden.
Frage:
Wie kann ich mit JQuery ermöglichen, dass in diesem Beispiel der 'alert' bei einem Klick auf das letzte Listenelement der Alert erscheint, ohne dass ich an der zweiten Zeile code etwas ändern muss oder ich weitere Zeilen hinzufüge?
Mit delegated events ist das elegant zu lösen. Der Handler wird auf den 'parent' gesetzt, aber dann vom Element aufgerufen, an das es delegiert wurde.
$('ul#list').on('click','li',function(){alert();})
$('ul#list').append('<li>Something</li>');
Welche Element Eigenschaft (property) sollte man wegen mangelnder Browseruntersütztung nicht benutzen?
Wo wird der Wert NICHT von Handlebars escaped?
Was bedeutet das "Hollywood Prinzip" (don't call us, we call you) bei der GUI Programmierung im Browser?
Bei der GUI Programmierung (und auch bei GUI Frameworks) sollte die Kontrolle nicht im Code des Entwicklers liegen, sondern beim GUI Framework, d.h für GUI-Komponenten Event Handler definieren und diese bei den Komponenten registrieren.
Etwas genauer und verständlicher: http://en.wikipedia.org/wiki/Hollywood_principle
Wenn ich 4 mal hintereinander einen neuen Node an den DOM-Tree hinzufüge, dann wird der Render-Tree vom Browser
Welche ist die effizienteste Methode um Dom Events zu registrieren?
was gibt der Aufruf "firstChild" auf einem node zurück?
Gibt das erste "Zeichen" zurück wenn es kein Tag ist. Wenn das erste "Zeichen" ein Tag ist wird das komplette Tag zurück gegeben.
was wird bei einer Änderung im DOM-Tree neu geladen?
Der gesammte Render-Tree wird neu geladen.
Was ist der Grund bezüglich Templating auf Client Seite?
Manuelles codieren komplexer JS Html Funktionen ist aufwändig. Mit einer Templating Library (z.B. Handlebars) ist es möglich komplexe HTML konstrukte in einer einfachere Art zu codieren damit Aufwand und Wartbarkeit geringer sind.
Was versteht man unter dem Begriff Event Bubbling?
Bei einer Benutzerinteraktion ruft der Browser nicht nur den Event Handler des eigentlichen TargetElements auf sondern auch alle Container diese Elements
Wie wird in Handlebars ein Property gemappt?
Wie kann der Browser reflow nicht verbessert werden?
Mit welcher DOM API Anfrage bekomme ich Zugriff auf das Element mit der ID "foo"?
document.getElementById('foo')
Gegeben ist folgendes HTML Document:
<!DOCTYPE html>
<html>
<body>
<p>Hallo</p>
<p>Welt!</p>
</body>
</html>
Was liefert der folgende Ausdruck:
document.body.childNodes[2]
Wie kann überprüft werden ob JQuery geladen wurde?
window.jQuery ist vorhanden.
Wenn das JQuery-File geladen wurde, erstellt dieses ein neues globales Objekt jQuery (window.jQuery). Nun kann z.B. mittels if (window.jQuery) {... oder if (typeof jQuery == 'undefined') {... dies abgefragt werden.
Wozu kann "Event Capturing" verwendet werden?
- Um eine "Glasspane" über die gesamte Page oder gewisse Container zu legen und user-inputs zu verhindern (z.b. wenn etwas geladen wird und man Mouse/Keyboard inputs während dieser zeit zu verhindern möchte, damit keine "undefinierten" Zustände passieren)
- Um z.b. ein die Rendering-Performance beim "Resizen" von Elementen zu optimieren, wenn man z.b. sehr viele Elemente hat, die sonst alle neu gezeichnet würden, wenn deren Parent resized wird. (in diesem fall möchte man einfach erst mal nur den parent resizen und erst wenn dies abgeschlossen ist die children neu zeichnen lassen)
- je nach Situation kann auch beim Drag & Drop event-capturing von vorteil sein, wenn man beispielsweise beim drop nicht möchte, dass ein beim drop unterliegendes element den drop-event erhält.
(Ich bin mir bewusst, dass man viele dinge auch mit anderen Methoden lösen kann...ich jedenfalls habe keine wirklich guten sites gefunden mit einschlägigen "best practises" beim verwenden von event-bubbling vs. event-capturing, ich glaube generell ist alles mit beiden "Arten" möglich, je nach Situation ist es aber einfacher das eine oder andere zu verwenden...)
Nenne vier wichtige Methoden des document-Objekts, um auf jeden beliebigen Element-node direkt zugreifen zu können.
- getElementById()
- getElementsByTagName()
- getElementsByClassName()
