Quelltext der Seite GlossarWiki:Bücher/Web-Programmierung/DOs and DON'Ts

== Vorgaben für eine Studienarbeit im Fach [[Web-Programmierung]] ==

=== Verwenden Sie aktuelle ECMAScript-Features ===

* Ihre Anwendung muss in aktuellen Browsern  laufen (mindestens Chrome; zusätzlich erwünscht: Firefox, Safari, Edge).
* Ältere Browserversionen brauchen nicht unterstützt zu werden.

Sie dürfen und sollen alle aktuellen ES6-Anweisungen/-Features verwenden, die von diesen vier Browsern unterstützt werden:
[https://kangax.github.io/compat-table/es6/ ES6 Compatibility Table] und
[https://kangax.github.io/compat-table/es2016plus/ ES6+ Compatibility Table] (ES 2016 bis ES 2023). 

Auch für Node.js-Anwendungen sollen Sie die aktuellen ES6-Anweisungen/-Features verwenden.

=== Verwenden Sie keine veralteten ECMAScript-Anweisungen/-Features ===

{| class="wikitable" style="width:100%"
! veraltet  || aktuell || Anmerkung
|-
| || [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode?retiredLocale=de strict mode] || in [[Vue]] automatisch aktiviert
|-
| ES5-Modularisierung || ES6-Module ||
|-
| <code>require</code> {{oÄ}} || <code>export</code>, <code>import</code> ||
|-
| <code>var</code> || <code>let</code> und <code>const</code> ||
|-
| <code>==</code> || <code>===</code> || <code>... == null</code> ist erlaubt (Test auf <code>null</code> oder <code>undefined</code>)
|-
| <code>p_event.keyCode == 13</code> || <code>p_event.key === 'Enter'</code> ||
|-
| Array:<br><code>for e in a</code> || <code>for e of a</code> <br> <code>for&nbsp;(let&nbsp;i=0,&nbsp;n=a.length;&nbsp;i<n;&nbsp;i++)<br>{ ... } </code> ||
|-
| Objekt:<br><code>for e in o</code> || <code>for k of Object.keys(o)</code><br><code>for v of Object.values(o)</code><br><code>for [k,v] of Object.entries(o)</code> ||
|-
| Prototyping || Classes ||
|- 
| <code>function</code> wenn nötig || Arrow Functions ansonsten ||
|- 
| <code>getA()</code>, <code>setA(x)</code> || Getter- und Setter-Funktionen ||
|}

=== Schreiben Sie modularen und wiederverwendbaren Code ===

* Modulare Programmierung macht, wenn man es richtig macht, den Code wartbarer. Jedes Modul sollte nur eine Aufgabe erfüllen. Wenn man überprüft hat, dass das Modul die ihm zugewiesene Aufgabe korrekt erfüllt,    
* Schreiben Sie wiederverwendbare Module.
** Wiederverwendbare Module können mehrfach im Code verwendet werden. Dies verhindert [[DRY|Don't Repeat Yourself]], d.h.der Code wird “[[DRY]]”.
** Wiederverwendbare Module können auch in Folgeprojekten verwendet werden.

=== Laden Sie CSS- und JS-Module asynchron===

* In einer HTML-Datei sollten kein CCS- und JS-Code direkt eingefügt werden (Ausnahme: <code>head.css</code>).
* Der Code sollte '''asynchron''' aus (von Vite optimierenten) Dateien geladen werden.