Vorbereitungen

JavaScript Dateien verlinken

Üblicherweise wurden JavaScript-Dateien am Ende des Bodys verlinkt, also direkt vor dem schließenden </body> Tag, da so sichergestellt wurde, dass die Seite fertig geladen war, bevor JavaScript aktiv werden konnte. Heute geht das auch im <head> wenn die Attribute async oder defer verwendet werden.

Die ideale Methode ist heute (zur Zeit):

<head>
  <script defer src="js/main.js"></script>
</head>

In real world situations würden wir aber eher einen absoluten Pfad verwenden (/ vor js):

<head>
  <script defer src="/js/main.js"></script>
</head>

JavaScript Module

Mit JavaScript Modulen kann der Code auf mehrere Dateien aufgeteilt werden. Das ist für wiederverwendbaren Code wichtig.

Module werden mit einem type Attribut im <script> Tag aktiviert:

<head>
  <script type="module" src="js/main.js"></script>
</head>

Text-Editor

Für JavaScript werden folgende Plugins benötigt:

Standard
Prettier Standard
ESLint braucht man, wenn man JS in HTML prüfen möchte.

How-To: zellwk.com

Die Konsole

Cache während dem Coden deaktivieren:

Konsole während dem coden geöffnet lassen
In den Settings “Disable HTTP Cache” anhaken (Dev-Tools > Einstellungen > Erweiterte Einstellungen: HTTP-Cache bei offenem Werkzeugkasten deaktivieren)

Für die Übungen überlege dir:

Was muss (logisch) passieren?
Was davon wird mit CSS gemacht und wie?
Was davon wird mit JS gemacht?
Wie muss ich das JS Schritt für Schritt schreiben, damit die Komponente funktioniert?

Coder’s Block

Den vielzitierten Coder’s Block gibt es überhaupt nicht. Manchmal steht man trotzdem auf dem Schlauch, dann helfen diese Tipps:

Breaking out of coder’s block

Akzeptiere, dass das Lernen nicht einfach so straightforward funktioniert
Manchmal glaubt man einfach, dass man das Zeug niemals lernen wird.
Ist nicht wahr. Probier folgendes:
1. Brich das Problem auf die kleinstmöglichen Schritte herunter
2. Finde Lösungen für die kleinsten Probleme
3. Setz die kleinen Lösungen Schritt für Schritt zu einer großen zusammen
4. Spaghetticode ist voll ok!
5. Refactor and improve