Coding, Web-Entwicklung

Udacity Erfahrungsbericht – Frontend Web Developer

Udacity ist eine von vielen kostenpflichtigen Möglichkeiten, sich online weiterzubilden. Anders als beispielsweise Programme von Universitäten ist die von Ex-Google Mitarbeiter Sebastian Thrun gegründete „Online-Universität“ eng an aktuellen Marktentwicklungen und Trends ausgerichtet und bietet ständig neue Kurse zu aktuellen Themen. Von Februar bis September 2018 habe ich bei Udacity den Front End Web Developer Nanodegree abgeschlossen. Was mir gefallen hat und was nicht, erfahrt ihr in diesem ausführlichen Abschlussbericht.

Update Mai 2019: Der Kurs wie in diesem Bericht beschrieben ist bei Udacity so nicht mehr im Angebot. Die wesentliche Neuerung ist nun, dass man nicht mehr frei lernen kann wie man möchte, sondern der Kursinhalt innerhalb eines viermonatigen strukturieren Programms durchgearbeitet werden muss. Viele Dinge wie Lehrmaterialien und Projektarbeiten sind aber gleich geblieben.

Kursaufbau

Udacitys Websites selbst ist teilweise schon auf Deutsch, der Kursinhalt selbst ist aber auf Englisch (bei einigen Videos gibt es schon deutsche Untertitel) und es wird vorausgesetzt, dass man in dieser Sprache kommuniziert. Eine Hürde sollte dies aber nicht sein, da Ressourcen und wichtige Websites eh auf Englisch sind und ein Entwickler hiermit klarkommen sollte.

Im Kurs werden folgende Inhalte in dieser Reihenfolge vermittelt:

1 : HTML und CSS
2 : Javascript
3 : Front End Applications
4 : React (Update Mai 2019: Dies ist nicht mehr Inhalt des Kurses)

Die einzelnen Teile bauen aufeinander auf. Man kann beispielsweise Teil 2 erst in Angriff nehmen, wenn alle Aufgaben aus Teil 1 abgegeben wurden (diese müssen noch nicht bewertet worden sein, müssen aber im Review sein).

Qualität der Kurse

Die Einleitungen zu den Kursen sind großartig und stark motivierend. Udacity hat sich hier genau überlegt, was sie wie am besten erklären können. Das Zuschauen macht Spaß und Quizze zwischendrin lockern die Struktur etwas auf.

Die Qualität der Video-Kurse ist meiner Ansicht nach sehr hoch. Dennoch gibt es einen Nachteil: Videos können nie so ins Detail gehen wie ein Buch. Deshalb muss man sich darauf einstellen: Das Video erklärt die Grundprinzipien und gibt einen guten Einstieg, vertiefendes Wissen muss man sich dazu aneignen, meistens durch Lesen.

Am Ende gibt es kleine Aufgaben, die immer so gestellt sind, dass man nicht nur das Gelernte anwenden, sondern selbstständig auch Neues erarbeiten kann. Beispiel: Nach dem ersten Lernabschnitt zum Thema HTML und CSS soll nach Vorlage ein Portfolio erstellt werden. Dieses kann modifiziert werden. Wie stark man es modifiziert und welche Styles man unterbringt und dazu neu lernt, bleibt dem User überlassen.

Wer nicht so stark in die Tiefe gehen, sondern nur einen Überblick über das Thema haben will, für den enthalten die Kurse aber alles, was zum Verständnis notwendig ist.

Lernen unterwegs & obil

Es gibt eine Udacity App, in der man sich alle Videokurse ansehen kann. Die App war 2018 noch ein wenig buggy und der kleine Smartphone-Bildschirm eignete sich nicht immer für die Quizze. Lernen war für mich deshalb praktisch nur am Desktop möglich. Damit man auch offline ein wenig lernen kann, stehen die Videos auch zum Download zur Verfügung. Auch Aufgaben können – wenn man nichts nachschlagen muss, was wohl eher unwahrscheinlich ist – offline erledigt werden. Richtig funktioniert das Lernkonzept von Udacity aber immer noch klassisch, mit einer stabilen Internetverbindung und auf einem großen Bildschirm.

Workload

Udacity gibt an, dass man für den Font End Web Developer 4 Monate benötigt, wenn man sich jede Woche 10 Stunden Zeit für diesen Nanodegree nimmt. Wie viel Zeit man tatsächlich investieren muss, hängt wohl individuell vom Vorwissen ab. Den ersten Kursabschnitt von vieren (HTML und CSS) kann man beispielsweise mit Vorkenntnissen in rund 14 Stunden abschließen. A React-Projekt (dieses ist 2019 nicht mehr im Kurs enthalten) saß ich aber beispielsweise insgesamt über 100 Stunden. Hinzu kommt der eigenen Anspruch: Möchte ich wirklich nur das Kursmaterial abreißen oder mich tatsächlich mit den Themen beschäftigen? Dann reichen 10 Stunden meiner Ansicht nach nicht aus.

Schwierigkeitsgrad der Projekte

Abgeschlossene Projekte und ein Code Review ohne Beanstandung sind die Voraussetzung dafür, einen Udacity Nanodegree zu erwerben.

Die Projekte sind inhaltlich sehr praxisnah, machen Spaß und bilden eine schöne Grundlage für ein Portfolio, wenn man sie noch ein wenig modifiziert und eine persönliche Note hinzugibt.

Der gefühlte Schwierigkeitsgrad der Projekte bei Udacity schwankt stark. Im Video sieht alles noch sehr einfach und irgendwie logisch aus, sobald es aber an das eigene Projekt geht, wird es manchmal doch etwas hakelig. Ich habe es so empfunden, dass man von Udacity oft einfach ins kalte Wasser geworfen wird und sich dann selbst einen Plan machen muss, womit man als erstes beginnt.

Hilfe bekommt man im Forum von anderen Teilnehmern oder auf YouTube, wo ehemalige Teilnehmer über ihr Projekt berichten. Da viele Teilnehmer ihr Projekt auch über github einreichen, findet man hier auch einige Lösungen. So kann man sich mit viel Geduld und einer Kombination aus Recherche auch gut selbst helfen. Mit der Zeit aber werden die Projekte komplexer und dann hilft Googeln oft nicht, sondern nur eine Person, die sich das Projekt im Ganzen anschaut. Hierzu gibt es bei Udacity einen Betreuer:

Mentorship & Betreuung

Damit sind wir beim ersten Kritikpunkt angelangt. So gut die Kurse konzipiert sind und so angenehm das Lernen insgesamt ist, das Mentorship-Versprechen konnte Udacity innerhalb der 7 Monate, die ich dort gelernt habe, nicht einlösen.

Anfangs gab es einen Mentor, mit dem ich 1:1 chatten konnte. Nach einer gewissen Inaktivität (ich arbeite nebenbei Vollzeit und musste wegen eines Projektes circa 2 Monate aussetzen) wurde mir ein neuer Mentor zugeteilt. Die Qualität der Mentoren schwankte stark: Manche gaben nur allgemeine Tipps, alle meine Fragen hatte ich mir meist beantwortet, ehe der Mentor sich irgendwann dazu meldete. Dann wurde ohne Vorankündigung das Mentorenprogramm komplett abgeschafft. Ein Mentor war nun allein für ein komplettes Projekt verantwortlich und die Studenten konnten sich gegenseitig Fragen beantworten. Ich war an dieser Stelle sehr frustriert, da ich kurz vor dem Abschluss stand und eine tiefergehende Betreuung benötigte. Zum Glück hat mich an dieser Stelle ein befreundeter Entwickler unterstützt.

Beim aktuellen Nanodegree wirbt Udacity wieder mit einer Betreuung durch den Mentor. Ich kann nicht beurteilen, ob sich die Situation inzwischen verbessert hat. 2018 hatte ich allerdings den Eindruck, dass es mehr Schüler als Mentoren gibt und Udacity hier einfach nicht Schritt halten konnte.

Code Reviews

Zu jedem Projekt gibt es abschließend ein Code Review. Nur wenn dieses gut ausfällt, gilt das Projekt als abgeschlossen.

Das Code-Review ist stark standardisiert, trotzdem wurden mir auch Verbesserungsvorschläge gegeben. Udacity gibt an, innerhalb von 24 Stunden zu antworten. Für das erste, einfache Projekt kam eine Antwort innerhalb von nur 4 Stunden, nach erneuter Einreichung eine Freigabe nach 15 Minuten. Für das zweite, umfangreichere Projekt wurde darauf hingewiesen, dass das Review hier 7 Tage dauern kann. Hier kam das Review an einem Sonntag innerhalb von einer Stunde!

Allerdings: Die Reviews sind manchmal etwas kryptisch und wenn man etwas anders macht, es aber noch nicht richtig ist, wird es einfach wieder abgelehnt. Das ist etwas frustrierend. Die Review-Qualität schwankt aber ganz stark je nach Reviewer. Manche haken einfach nur ab, was erfüllt ist und was nicht, andere geben hilfreiche Tipps bei der Lösung.

Fazit

Auch wenn Udacity und seine Nanodegrees in deutschen Unternehmen keinesfalls einen Stellenwert wie ein Uniabschluss einnehmen, lohnt es sich, bei Udacity für sich selbst zu lernen. Die Qualität der Kurse ist außergewöhnlich hoch. Udacity erwartet dafür von seinen Studenten ein gewisses Maß an Experimentierfreudigkeit, Neugier und Selbständigkeit – alles Qualitäten, die man benötigt, wenn man im Webentwicklungs-Umfeld unterwegs ist.

Standard
Web-Entwicklung

Ressourcen: Einstieg in die Webentwicklung

Wenn du diesen Artikel liest, hast du wahrscheinlich schon einmal auf irgendeine Weise an einer Website mitgearbeitet. Oder zumindest mit WordPress geblogt. Und wahrscheinlich hast du dabei festgestellt, dass dir diese Arbeit ziemlich gut gefällt und du noch tiefer einsteigen möchtest. Am Anfang ist das gar nicht so einfach, da man nicht so recht weiß, wo man einsteigen soll. Mit diesem Starterpaket kannst du aber sicher sein, dass du alle für den Einstieg wichtigen Themen mitnimmst.

Deine Grundausstattung für den Einstieg

1. Das IT-Handbuch für Fachinformatiker

Eigentlich ist dieses Buch ein Begleiter für den Ausbildungsgang „Fachinformatiker für Anwendungsentwicklung“. Was in diesem Ausbildungsgang gelehrt wird, kommt aber dem schon relativ nahe, was du als Webentwickler benötigst (zumindest im Vergleich zu einem Handbuch über Informatik oder Ähnliches). Darüberhinaus gibt dir dieses Buch ein breit gefächertes Grundlagenwissen, das wir bei deiner Arbeit helfen wird.

Eine ältere Auflage des Buches stellt der Verlag kostenfrei online zur Verfügung:

2. Schrödinger lernt HTML, CSS und Javascript

Einer der besten direkten Einstiege in HTML, CSS und Javascript ist das knapp 900 Seiten starke Buch aus der Schrödinger-Reihe des Rheinwerk-Verlags.

Schau dir einfach mal die Leseprobe an, dann wirst du sehen, was dieses Buch so besonders macht: Mit viel Liebe zum Detail wird alles ganz genau erklärt. Es gibt momentan auf dem Markt kein vergleichbares Buch mit Ausnahme der „Von Kopf bis Fuß“-Reihe (allerdings ist diese schon etwas veraltet).

3. Code-Editor

Um die Codebeispiele ausprobieren zu können, benötigst du einen Texteditor, mit dem du Code schreiben kannst und der die Code-Syntax ordentlich hervorhebt. Die beiden bekanntesten Editoren sind:

4. Codepen

Schnell mal etwas Code ausprobieren oder schauen, wie es andere machen? Das geht mit Codepen, einer Art Facebook für Entwickler. Die Registrierung ist kostenfrei und du kannst beliebig viele sogenannte Pens erstellen, allerdings sind diese im kostenlosen Basisaccount alle öffentlich einsehbar.

5. Git und GitHub

Wenn du entwickelst, ist es sehr praktisch, deine einzelnen Arbeitsschritte zu sichern und Zwischenversionen zu speichern. Das hilft später auch, Fehler schneller zu identifizieren oder zu beheben, indem du einfach eine alte, korrekte Version wieder einspielst. Das beliebteste Tool hierzu ist Git – und die dazugehörige Online-Plattform GitHub.

Die Funktionen von Git sind am Anfang nicht immer ganz eingänglich – sowohl was die Bedienung als auch die Konzepte von Commits, Branches etc. angeht. Ich empfehle hierzu deshalb folgendes Lehrmaterial:

  • Wenn du noch nie mit der Shell gearbeitet hast, hilft zunächst das Buch Git for Humans, Git und seine Bedienung zu verstehen
  • Aufbauend darauf schaust du dir dann diesen kostenlosen Kurs bei Udacity an

Ressourcen zur Weiterbildung

„Das ist doch ganz einfach, das Web ist voll von Anleitungen, google einfach mal.“ Diese Antwort macht den Einstieg meist schwer, denn du kannst nur nach einer Lösung suchen, wenn du weißt, was du suchst. Deshalb ist es am Anfang meist doch einfacher, auf vorstrukturierte, in sich geschlossene Lernmaterialien zugreifen, die einen Überblick über alles Wesentliche geben. Hast du das oben empfohlene Schrödinger-Buch also durchgearbeitet, kannst du hier dein Wissen erweitern:

  • Udacity-Kurse: Udacity bietet sehr viele kostenfreie, qualitativ hochwertige Kurse zum Thema Webentwicklung an. Grundsätzlich lassen sich hier auch Zertifikate, sogenannte Nanodegrees ablegen, die sind aber kostenpflichtig. Eine Übersicht über alle kostenfreien Tutorials gibt es hier: https://de.udacity.com/courses/all
  • Rheinwerk Open Books: alte Auflagen des Rheinwerk-Verlages gibt es kostenfrei online zum Nachlesen
  • Atomic Design – ein Buch zur Modularen Entwicklung von Web-Interfaces. Die Gedanken, die hier formuliert werden, gehören zu den aktuellen Best-Practices
  • Von Kopf bis Fuß: Diese Reihe aus dem O’Reilly-Verlag schafft es, technische Themen sehr einfach zu erklären. Viele praktische Beispiele zum Mitmachen und Nachvollziehen helfen, dass die Inhalte auch wirklich im Kopf hängen bleiben. Besonders empfehlen, da sie mir selbst geholfen haben, kann ich die Bücher „jQuery“ und „Entwurfsmuster“
  • Smashing Magazine Bücher: Die Reihe eines bekannten Magazins für Webentwicklung. Viele Bücher gibt es günstiger, wenn man sie vor Erscheinen vorbestellt
  • A Book Apart: Bücher, die das bekannte Magazin „A List Apart“ herausbringt. Die Besonderheit dieser Bücher: Sie sind alle so geschrieben, dass Einsteiger sie verstehen.

Praktische Tools

Ressourcen zum Nachschlagen

Standard
Web-Entwicklung

JavaScript Cheat Sheet

Inhalt

  1. Elemente auswählen
  2. Elemente hinzufügen, ändern und löschen
  3. Events auslösen
  4. First Class Functions
  5. Objektorientiertes JavaScript

Allgemeines

JavaScript lässt sich genau wie HTML und CSS direkt im Browser manipulieren. In Chrome geht das über die Developer Tools (F12) unter Console (Esc).

Elemente auswählen

Mit Javascript lassen sich einzelne HTML-Elemente einer Seite auswählen und dann beliebig manipulieren, löschen etc.

Beispielcode:

<div id="wrapper">
  <h1 id="caption">Ich bin eine Überschrift</h1>
  <p class="paragraph">Dies ist ein Fließtext.</p>

  <input id="input-field" value="99">

  <ul class="argument-list">
    <li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>
    <li class="argument">Argument 2</li>
    <li class="argument">Argument 3</li>
  </ul>

  <p class="second-paragraph">Dies ist noch ein Fließtext.</p>
</div>

In diesem Code lassen sich die Element so auswählen und ausgeben:

document.getElementById('caption');
<h1 id="caption">Ich bin eine Überschrift</h1>

Gibt immer nur ein Element zurück. Das Element verfügt über eine einmalige ID.

const mainElement = document.getElementById('wrapper');
mainElement.querySelector('#caption');
<h1 id="caption">Ich bin eine Überschrift</h1>

Funktioniert genau wie das Beispiel oben, sucht allerdings nur nach dem Element in einem anderen Element und nicht im gesamten document.

document.querySelector('.argument');
<li class="argument">Argument 1</li>

Selektiert Elemente, die mehr als ein Mal vorkommen können, davon aber immer nur das erste.

document.querySelectorAll('.argument');
NodeList(3) [li.argument, li.argument, li.argument]
0:li.argument
1:li.argument
2:li.argument
length:3
__proto__:NodeList

Selektiert nicht nur das erste, sondern alle Element und gibt eine Node-Liste aus, über die man im Gegensatz zu getElementsByClassName und getElementsByTagName loopen kann:

const element = document.querySelectorAll('.argument');
for(let i = 0; i < element; i++){
    console.dir(element[i]);
}
document.getElementsByClassName('argument');
HTMLCollection(3) [li.argument, li.argument, li.argument]
0:li.argument
1:li.argument
2:li.argument
length:3
__proto__:HTMLCollection

Selektiert im Gegensatz zu querySelector alle Elemente und gibt sie als Liste aus.

document.getElementsByTagName('p');
HTMLCollection(2) [p.paragraph, p.second-paragraph]
0:p.paragraph
1:p.second-paragraph
length:2
__proto__:HTMLCollection

Gibt eine Liste aller vorkommenden Tags (und ihrer Klassen) aus.

document.querySelector('.argument').innerHTML;
"Argument 1 <a href="link.html">mit einem Link</a>"

Ausgewählt wurde das erste Listenelement mit der Klasse .argument. Alles, was sich innerhalb dieses Tags befindet, wird als String ausgegeben.

document.querySelector('.argument').outerHTML;
"<li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>"

Die Auswahl ist dieselbe wie beiinnerHTML, es wird allerdings auch der umschließende Tag mitgegeben.

document.querySelector('.argument').textContent;
"Argument 1 mit einem Link"

Gibt nur den Text innerhalb des Tags wieder und entfernt alle HTML-Tags innerhalb des Textes. (Wichtig: Übergibt man textContent, der HTML-Content enthält, wird dieser natürlich auch nur als String, nicht als HTML dargestellt!)

document.querySelector('.argument').innerText;
"<li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>"

InnerText funktioniert fast genauso wie textContent – mit einem Unterschied: Der Text wird bei innerText so ausgegeben, wie er durch das CSS gestyled wurde. Wird beispielsweise ein Teil des Textes auf display:none gesetzt, wird dieser mit innerText nicht ausgegeben.

document.querySelector('.argument-list').firstElementChild;
<li class="argument">
   "Argument 1 "
   <a href="link.html">mit einem Link</a>
</li>
document.getElementById('input-field').value;
"99"

Gibt nur den Value des Input-Feldes aus

document.querySelector('#input-field').className;

document.querySelector('#input-field').className.split(' ')
"super cool classnames"

(3) ["super", "cool", "classnames"]
0:"super"
1:"cool"
2:"classnames"
length:3
__proto__:Array(0)

Gibt die Klassennamen eines elements als String aus. Über Split kann daraus ein Array gemacht werden.

document.querySelector('#input-field').classList;
DOMTokenList(3) ["super", "cool", "classnames", value: "super cool classnames"]
0:"super"
1:"cool"
2:"classnames"
length:3
value:"super cool classnames"
__proto__:DOMTokenList

Möglich bei classList sind folgende Aktionen:

  • .add()
  • .remove()
  • .toggle()
  • .contains()

Elemente hinzufügen, ändern und löschen

Beispielcode:

<div id="wrapper">
  <h1 id="caption">Ich bin eine Überschrift</h1>
  <p class="paragraph">Dies ist ein Fließtext.</p>

  <input id="input-field" value="99">

  <ul class="argument-list">
    <li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>
    <li class="argument">Argument 2</li>
    <li class="argument">Argument 3</li>
  </ul>

  <p class="second-paragraph">Dies ist noch ein Fließtext.</p>
</div>

Hinzufügen

const newParagraph = document.createElement('p');
newParagraph.textContent = "ABCD";
document.querySelector('.paragraph').appendChild(newParagraph);
<p class="paragraph">Dies ist ein Fließtext.</p>
<p>ABCD</p> // neu hinzugefügt!

Ein Element wird mit createElement erstellt, mit textContent mit Inhalt gefüllt und mit appendChild hinter dem ersten p-Tag eingefügt.

const mainHeading = document.querySelector('#caption');
const textToAdd = '<h2>Unterüberschrift</h2>';

mainHeading.insertAdjacentHTML('afterend', textToAdd);

Mit insertAdjacentHTML lassen sich Element und Inhalt flexibler als mit appendChild hinzufügen. Es gibt vier verschiedenen Parameter, die gesetzt werden können:

  • beforebegin: vor dem h2-Tag
  • afterbegin: nach dem h2-Tag
  • beforeend: vor dem /h2-Tag
  • afterend: nach dem /h2-Tag

Verändern

document.querySelector('h1').style.color = 'red';
document.querySelector('h1').style.textDecoration = 'underline';
<h1 id="caption" style="color: red; text-decoration: underline;">Ich bin eine Überschrift</h1>

Über style kann das Styling verändert werden (nur ein Wert pro Aufruf).

document.querySelector('h1').style.cssText = 'color: red; text-decoration: underline;';
<h1 id="caption" style="color: red; text-decoration: underline;">Ich bin eine Überschrift</h1>

Mit cssText dagegen können mehrere Werte pro Aufruf verändert werden. Während oben für Werte wie text-decoration die lowerCamelCase-Schreibvariante verwendet wird, kann man hier die aus CSS gewohnte Schreibweise nutzen.

document.querySelector('h1').setAttribute('id', 'new-caption');
document.querySelector('h1').setAttribute('style', 'new-style');
<h1 id="caption">Ich bin eine Überschrift</h1>  // vorher
<h1 id="new-caption" class="new-style">Ich bin eine Überschrift</h1>  // nachher 

Entfernen

const firstElement = document.querySelector('.argument-list').firstElementChild;
document.querySelector('.argument-list').removeChild(firstElement);

Zunächst wird das erste Unterelement der Liste ausgewählt und anschließend entfernt. Einfacher geht es aber so:

const firstElement = document.querySelector('.argument');
document.querySelector('.argument').parentElement.removeChild(firstElement);

Erst wird das zu entfernende Element direkt ausgewählt und dann direkt entfernt. Und am einfachsten geht es so:

document.querySelector('.argument').remove();

Events

Eine Liste mit allen verfügbaren Events gibt es auf der Seite von Mozilla. Events können in den Developer Tools (in Chrome) untersucht werden, indem ein Element ausgewählt wird. Unter Event Listeners findet man alle vorhandenen Events.

document.querySelector('h1').addEventListener('click', function () {
  console.log('The heading was clicked!');
});

Fügt der Konsole „The heading was clicked hinzu“, sobald die H1 angeklickt wird.

function headingClickFunction() {
console.log('The heading was clicked');
}

document.querySelector('h1').addEventListener('click', headingClickFunction);
document.querySelector('h1').removeEventListener('click', headingClickFunction);

Entfernt einen hinzugefügten EventListener. Wichtig dabei: Beide Aktionen, sowohl add als auch remove müssen auf dieselbe Funktion verweisen.

First Class Functions

Funktionen in JavaScript sind First-Class-Funktionen. Das bedeutet:

1. Sie können in Variablen gespeichert werden:

const variable = myFunction();

2. Sie können von einer anderen Funktion zurückgegeben werden:

const higherOrderFunction = function () {
    return function () {
        return 8;
    }
}

3. Sie können als Argument an eine andere Funktion übergeben werden.

Eine Funktion, die an eine andere Funktion übergeben wird, nennt man Callback Function. Die Funktion, die die Callback Function ausführt, heißt Higher-Order Function.

Objektorientiertes JavaScript

Literal notation – empfohlen:

const myObject = {};

Constructor function:

const myObject = new Object();

Beispiel für ein Objekt:

const oma = {
  age: 82,
  name: 'Elfriede',
  greet: function () {
    console.log('Guten Tag');
  }
};

Gibt einen Array aller Keys / Values aus:

const oma = {
  name: 'Elfriede',
};


Object.keys(oma);    // name

Object.values(oma);  // Elfriede

Values ist erst seit 2017 Standard, wird also noch nicht von jedem Browser unterstützt.

Objekte modifizieren

Zugreifen oder verändern einzelner Elemente:

oma.age = 82;
oma.greet;
oma[‚greet‘]();

… oder erstellen ganz neuer Elemente:

oma.haircut = 'Dauerwelle';  // oder
oma['haircut'] = 'Dauerwelle';

Entfernen einer Property:

delete oma.haircut;

Funktionen ansprechen:

const oma = {
  greet: function () {
    console.log('Guten Tag');
  }
};
const oma = {
  greet: function gutenTag() {
    console.log('Guten Tag');
  }
};

… geht bei beiden gleich:

oma.greet();

This

Mit this können Methoden direkt das Objekt adressieren:

const oma = {
  name: 'Elfriede',
  greet: function () {
    console.log(`Ich heiße ${this.name}.`);
  }
};
oma.greet();

Achtung: Die Art und Weise, wie Funktionen aufgerufen werden, hat einen Einfluss darauf, auf was sich this bezieht!

a. Funktion als Methode in einem Objekt -> das Objekt selbst *
b. „Normale“ Funktion -> das window Objekt
c. …

* Wird eine Funktion aus einem Objekt aber in einer Variablen gespeichert, ist die Referenz das window Objekt:

const oma = {
  name: 'Elfriede',
  greet: function () {
    console.log(`Ich heiße ${this.name}.`);
  }
};

const talk = oma.greet;
talk();
Standard
Web-Entwicklung

Für Buchblogs: Bibliografien zu einem Autor ausgeben

Gestern hatte ich erklärt, wie ihr über eine Schlagwortausgabe in einem Buchblog weitere Bücher eines Autors ausgeben könnt. Die Schlagworte kann man aber noch weiter verwenden, und zwar für eine automatische Bibliografie zum Autor.

Warum die Standardabfrage nicht für Bibliografien gemacht ist

Über die Verschlagwortung einzelner Artikel kann man eigentlich ganz einfach eine Bibliografie erstellen: So tauchen alle Bücher, die ich unter „Haruki Murakami“ verschlagwortet habe, auf einer Seite auf, die das URL-Schema „http://meinedomain.de/?tag=haruki-murakami“ hat. Die Bibliografie generiert sich also automatisch von selbst. Allerdings werden diese Einträge nach Erstellungsdatum geordnet ausgegeben. So kann eine Liste dann beispielsweise so aussehen:

Die Abfrage dazu in tag.php (liegt im Theme-Ordner) sieht dann so aus:

<h2><?php single_tag_title(); ?> </h2>
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></p>
<?php endwhile; ?>

Ich möchte nun aber noch ein Erscheinungsdatum hinzufügen – schließlich soll es ja eine richtige Bibliografie werden, die einen chronologischen Überblick über das Werk des Autors gibt. Dazu lege ich ein Custom Field „erscheungsjahr“ unter zu jedem Artikel an, den ich mit einem Autorennamen verschlagwortet habe (wie ihr dieses anlegt, hatte ich ebenfalls im letzten Artikel erklärt). Damit das Erscheinungsjahr nun auch angezeigt wird, füge ich innerhalb des Loops eine Zeile hinzu:

<?php echo get_post_meta($post->ID, 'erscheinungsjahr_japan', true); ?>

Nun gibt mir WordPress folgende Liste aus:

Haruki Murakami

2004: After Dark

1988: Tanz mit dem Schafsmann

1987: Naokos Lächeln

Die Liste ist nicht chronologisch geordnet, da WordPress die Artikel nach Erstellungsdatum ausgibt, das heißt After Dark ist der neueste Artikel. Für die Tags möchte ich aber eine chronologische, also hier numerische Ordnung nach dem Custom Field „erscheinungsjahr“. Deshalb muss die Abfrage etwas umgeschrieben werden.

Eine chronologische Bibliografie erstellen

Die Abfrage in tag.php muss also durch folgenden Code ersetzt werden:

<h2><?php single_tag_title(); ?></h2>

<?php if ( tag_description() ) : // Show an optional tag description ?>
<?php echo tag_description(); ?>

<?php endif; ?>

<?php
query_posts( $query_string . '&orderby=meta_value_num&meta_key=erscheinungsjahr_&order=ASC' );
while ( have_posts() ) : the_post(); ?>

<p><?php echo get_post_meta($post->ID, 'erscheinungsjahr_japan', true); ?>: <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></p>

<?php
endwhile;
wp_reset_query();
?> 

Die Anzeige ist nun chronologisch:

Haruki Murakami

1987: Naokos Lächeln

1988: Tanz mit dem Schafsmann

2004: After Dark

Erweiterte Optionen

Wollt ihr noch eine Autorenbiografie hinzufügen, könnt ihr einfach zum Schlagwort eine Beschreibung hinzufügen. Außerdem ist es möglich, Seiten zu bestimmten Autoren beziehungsweise Tags individuell zu gestalten. Kopiert dazu einfach „tag.php“ und benennt sie um ind „tag-schlagwort.php“ beziehungsweise „tag-haruki-murakami.php“. Nun könnt ihr nur für dieses eine Schlagwort ein eigenes Template erstellen!

Wer es noch einmal ausführlich nachlesen möchte:

Standard