Erstellung dynamischer Variablennamen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Erstellung dynamischer Variablennamen Thu, 26 Mar 20 22:27:29 Z https://forum.selfhtml.org/self/2020/mar/26/erstellung-dynamischer-variablennamen/1767790#m1767790 https://forum.selfhtml.org/self/2020/mar/26/erstellung-dynamischer-variablennamen/1767790#m1767790 <p>Hallo,</p> <p>lerne gerade die Grundprinzipien von Javascript und habe eine Frage zu dynamischen Variablennamen:</p> <pre><code class="block">var VariableName = "neuerVariablenName"; this[VariableName] = [1,2,3]; console.log(neuerVariablenName); // OUTPUT = "[1,2,3]" </code></pre> <p>Wie lassen sich solche generierten Variablen noch weiter verfeinern?</p> <p>(<code>var</code>, <code>let</code>, <code>const</code>, global Scope vs. local/function Scope?)</p> <p>Danke!</p> Erstellung dynamischer Variablennamen Thu, 26 Mar 20 23:30:25 Z https://forum.selfhtml.org/self/2020/mar/26/erstellung-dynamischer-variablennamen/1767791#m1767791 https://forum.selfhtml.org/self/2020/mar/26/erstellung-dynamischer-variablennamen/1767791#m1767791 <p>@@Pietro Frizzi</p> <blockquote> <p>Wie lassen sich solche generierten Variablen noch weiter verfeinern?</p> </blockquote> <p>Wie lassen sich solche generischen Fragen noch weiter verfeinern?</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis: Lehrer ist wohl doch ein regelrechter Beruf! (<a href="https://twitter.com/heuteshow/status/1241117074191273997" rel="nofollow noopener noreferrer">@heuteshow</a>) </div> Erstellung dynamischer Variablennamen Fri, 27 Mar 20 11:42:21 Z https://forum.selfhtml.org/self/2020/mar/26/erstellung-dynamischer-variablennamen/1767820#m1767820 https://forum.selfhtml.org/self/2020/mar/26/erstellung-dynamischer-variablennamen/1767820#m1767820 <p>Hallo Pietro,</p> <p>die beste Verfeinerung ist, es zu lassen.</p> <p>Der Container für globale Variablen ist das globale Objekt, das bei JavaScript im Browser in der Variablen window zu finden ist.</p> <p>Wenn Du - wie empfohlen ist - dein Script im strict-Mode aufrufst und eine Funktion aufrufst, steht in this nichts mehr drin, es hat den Wert <code>undefined</code>.</p> <p>D.h. statt <code>this[VariableName]</code> wäre <code>window[VariableName]</code> korrekt.</p> <p>ABER: Es ist ganz schlechter Stil, in JavaScript den globalen Namensraum ohne Not zu nutzen. Man modularisiert seinen Code, entweder mit Tools wie ECMAScript-Module oder im Eigenbau durch IIFEs (immediately invoked function expression). Das ist für einen Einsteiger etwas zu hoch, das gebe ich zu, aber Du solltest Dich von Anfang an daran gewöhnen, nicht einfach das globalen Objekt zuzumüllen.</p> <p>Ein Eintrag im window-Objekt entspricht einer var-Deklaration auf globaler Ebene. let- und const-Deklarationen werden nicht im window-Objekt eingetragen, sondern im lokalen Scope, deshalb kannst Du über Manipulationen am window-Objekt auch keine let- oder const-Eigenschaften herbeiführen.</p> <p>Ich gebe zu, das ist etwas irritierend. Wenn ich keine Funktion schreibe, dann befinde ich mich ja auf globaler Ebene, heißt es. Aber:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">var</span> foo<span class="token operator">=</span><span class="token number">7</span><span class="token punctuation">;</span> <span class="token keyword">let</span> bar<span class="token operator">=</span><span class="token number">42</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">[</span><span class="token string">'foo'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">[</span><span class="token string">'bar'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>gibt 7 und <em>undefined</em> aus. "var" ist also globaler als "let". Im Normalfall ist das unerheblich.</p> <p>Ein Pattern zum Kapseln deiner Daten, das auf allen Browsern funktioniert, ist die IIFE - sofortausgeführte Funktion. Das sieht so aus:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">"use strict"</span><span class="token punctuation">;</span> <span class="token comment">// deine Befehle</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>Dieser Code erzeugt eine namenlose Funktion und führt den Code darin sofort aus. Und zwar im strict mode, d.h. du bekommst sofort eine Fehlermeldung wenn Du eine Variable nicht deklarierst. Programmieren im strict mode ist ebenfalls eine gute Idee - aber möglicherweise funktionieren dann ein paar Tutorials nicht, die für den sloppy-mode gemacht sind.</p> <p>Innerhalb dieser Funktion kannst Du Variablen anlegen, weitere Funktionen definieren, und alles tun was Du willst. Der globale Namensraum bleibt unverschmutzt.</p> <p>Eine Alternative, die aber im Internet Explorer nicht funktioniert (den noch ein paar Leute verwenden müssen), sind ECMAScript-Module. Die laufen automatisch im strict-Mode und kapseln ebenfalls alles, was darin deklariert wurde, ein.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token comment">// Deine Befehle</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>Unterschied zwischen normalen Script-Elementen und module-Elementen ist auch, dass module-Elemente automatisch deferred sind, d.h. das Script wird nicht in dem Moment ausgeführt wo der Browser es antrifft, sondern erst dann, wenn das Dokument vollständig geladen ist. Um diesen Moment abzuwarten, muss man ohne Module einen sogenannten ready-Handler programmieren, bei Modulen gibt's das geschenkt.</p> <p>Beide Modularisierungstechniken haben gemein, dass Du daran gehindert wirst, die veraltete Ereignis-Registrierung mit onxxxx Attributen zu benutzen. Wenn Du beispielsweise auf ein click Event eines Buttons reagieren willst, hat man früher <code><button onclick="buttongeklickt()"></code> geschrieben. Wenn dein Code in einem Modul steht, dann geht das nicht. Aber man soll sowas ohnehin nicht mehr tun, sondern addEventListener verwenden.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>okButton<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>OK<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token comment"><!-- Mit IIFE --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token string">"use strict"</span><span class="token punctuation">;</span> <span class="token keyword">let</span> okButton <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'okButton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> okButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> HandleOkButtonClickEvent<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">HandleOkButtonClickEvent</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// auf ok reagieren</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token comment"><!-- Als Modul --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">let</span> okButton <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'okButton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> okButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> HandleOkButtonClickEvent<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">HandleOkButtonClickEvent</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// auf ok reagieren</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>Auf diese Weise klappt das, und dein HTML bleibt von JavaScript-Schnipseln frei. So baut man das heute.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>