HTML and CSS Reference
In-Depth Information
Das Formular ruft beim Antippen des
Anzeigen
-Buttons die Funktion
kontakteAnzeigen()
auf und übergibt über das Document Object Model die
einzelnen Formularwerte an die Variablen. Anschließend wird die selbst definierte
getContacts()
-Funktion aufgerufen:
getContacts(parseInt(pageSize), parseInt(pageNumber), nameFilter);
Interessant bei diesem Aufruf ist, dass die Variablen
pageSize
und
pageNumber
auf
einen Integer-Ganzzahlwert gebracht werden. Nachdem die Variablen als Optionspara-
meter zusammengefasst wurden, erfolgt der eigentliche JavaScript-API-Aufruf
getAllContacts()
,
der
bei
Erfolg
die
Funktion
getContacts Return
(contactsArray)
aufruft.
Die Variable
contactsArray.length
bestimmt, wie viele Adresseinträge von der API
empfangen wurden, und eine
for
-Schleife läuft so lange durch, bis alle Vor- und Nach-
namen erfasst sind.
for (var i 0; i < contactsArray.length; i++) {
var firstName contactsArray[i].firstName;
var lastName contactsArray[i].lastName;
Bei jedem Durchlauf der Schleife wird der aktuelle Vorname in die Variable
firstName
und der Nachname in die Variable
lastName
übertragen und auch gleich auf dem
Bildschirm ausgegeben. Um direkt von dieser JavaScript-Funktion auf den Bildschirm
zu schreiben, benutzen wir wieder das Document Object Model, erstellen einen neuen
div
-Container über:
newDiv document.createElement("div");
… und weisen diesem Container die Klasse
content
und den folgenden Inhalt zu:
newDiv.ClassName "content"
newDiv.innerHTML '<ul class "pageitem"><li class "menu"><span
class "name"><b>' + lastName + "</b>, " + firstName +'</span></li></ul>';
Pro Durchlauf wird also ein neuer
ul
- und
li
-Bereich mit dem Nachnamen und dem
Vornamen erstellt, über folgende Zeilen oberhalb des
footer
div
-Containers geschrie-
ben und somit angezeigt:
// Neues Element und Inhalt in DOM übernehmen
listen div document.getElementById("footer");
document.body.insertBefore(newDiv, listen div);
Ziemlich einfach, oder? Etwas komplizierter ist es, die E-Mail-Adressen oder Telefon-
nummern eines Kontakts auszulesen. Grund dafür ist, dass ein Kontakt mehrere Tele-
fonnummern oder E-Mail-Adressen besitzen kann. Pro Kontakt wird deshalb für Tele-
fon und E-Mail ein neues Array angelegt. Würden wir der ersten Schleife, in der der
Vor- und Nachname abgefragt wird, noch die folgende Schleife hinzufügen, würden wir
zu einem Kontakt auch die Telefonnummer erhalten:
for (var j 0; j < contactsArray[i].phoneNumbers.length; ++j) {
var phoneNumber contactsArray[i].phoneNumbers[j].label + ": " +
contactsArray[i].phoneNumbers[j].value;
