tag:forum.selfhtml.org,2005:/selfVanilla – best practice gesucht – SELFHTML-Forum2020-04-20T11:43:06Zhttps://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769106#m1769106Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-04-18T06:19:06Z2020-04-18T06:30:01ZVanilla – best practice gesucht<p>Hallo alle,</p>
<p>ich möchte mich für ein Projekt von JQuery trennen.</p>
<p>Ich habe ein Formular, für das bei jeder Änderung die Aktion "A" ausgelöst werden soll, bei Betätigung eines Buttons einer bestimmten Klasse (von denen es mehrere geben kann) soll jedoch erst die Aktion "B" ausgelöst werden. Meine JQuery-Lösung funktioniert.</p>
<pre><code class="block language-js"><span class="token function-variable function">do_B</span> <span class="token operator">=</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 comment">// do something;</span>
<span class="token function">do_A</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function-variable function">do_A</span> <span class="token operator">=</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 comment">// do something;</span>
<span class="token punctuation">}</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'.foo'</span><span class="token punctuation">,</span> do_B<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// JQuerys 'click' lauscht auch auf Tastatur und Touch</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">change</span><span class="token punctuation">(</span>do_A<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Wie würde man dies idealerweise umsetzen? A und B in eine Funktion und beim Aufruf nach event.target schauen? A und B in getrennte Funktionen? Wovon wäre diese Entscheidung abhängig?</p>
<p>Die Seite kann ich leider nicht zeigen.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769107#m1769107Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-18T07:10:43Z2020-04-18T07:10:43ZVanilla – best practice gesucht<p>@@Matthias Apsel</p>
<blockquote>
<pre><code class="block language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'.foo'</span><span class="token punctuation">,</span> do_B<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// JQuerys 'click' lauscht auch auf Tastatur und Touch</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">change</span><span class="token punctuation">(</span>do_A<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Wie würde man dies idealerweise umsetzen? A und B in eine Funktion und beim Aufruf nach event.target schauen?</p>
</blockquote>
<p>Das sollte dasselbe tun (mit <code class="language-js"><span class="token function">do_A</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> und <code class="language-js"><span class="token function">do_B</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> wie gehabt):</p>
<pre><code class="block language-js">document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><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> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">do_B</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 class="token punctuation">;</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> do_A<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<hr>
<blockquote>
<p>A und B in getrennte Funktionen? Wovon wäre diese Entscheidung abhängig?</p>
</blockquote>
<p>Davon, ob B ohne A Sinn hat. Dann:</p>
<pre><code class="block language-js"><span class="token function-variable function">do_B</span> <span class="token operator">=</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 comment">// do something;</span>
<span class="token punctuation">}</span>
<span class="token function-variable function">do_A</span> <span class="token operator">=</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 comment">// do something;</span>
<span class="token punctuation">}</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><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> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">do_B</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">do_A</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 class="token punctuation">;</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> do_A<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769109#m1769109Felix Riestererhttps://felix-riesterer.de2020-04-18T07:22:17Z2020-04-18T07:22:17ZVanilla – best practice gesucht<p>Lieber Matthias,</p>
<p>inzwischen unterstützen alle aktuellen Browser <code class="language-javascript">event<span class="token punctuation">.</span>target</code>, so dass Du nicht mehr für den IE nach <code class="language-javascript">event<span class="token punctuation">.</span>srcElement</code> suchen musst.</p>
<pre><code class="block language-javascript"><span class="token keyword">let</span> <span class="token function-variable function">do_A</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> target <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">;</span> <span class="token comment">// event.target || event.srcElement für legacy IE</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> <span class="token function-variable function">do_b</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> target <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">;</span>
<span class="token comment">// ...</span>
<span class="token function">do_A</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Den Eventhandler kann man in Vanilla wie üblich mit <code class="language-javascript">addEventListener</code> binden:</p>
<blockquote>
<pre><code class="block language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'.foo'</span><span class="token punctuation">,</span> do_B<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// JQuerys 'click' lauscht auch auf Tastatur und Touch</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">change</span><span class="token punctuation">(</span>do_A<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
<p>Quick & dirty:</p>
<pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"form"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">f</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
f<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".foo"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
n<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> do_B<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>
f<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> do_A<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>
</code></pre>
<p>Je nach Alter des Browsers kann es sein, dass die von <code class="language-javascript">querySelectorAll</code> zurückgegebene Liste kein <code class="language-javascript">forEach</code> unterstützt. Da musst Du das Ergebnis <a href="https://forum.selfhtml.org/self/2018/jun/16/javascript-und-css-selectoren/1724902#m1724902" rel="noopener noreferrer">erst in ein echtes Array umwandeln</a>, bevor Du mit <code class="language-javascript">forEach</code> iterierst.</p>
<p>Liebe Grüße</p>
<p>Felix Riesterer</p>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769130#m1769130Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-04-18T10:47:54Z2020-04-18T10:47:54ZVanilla – best practice gesucht<p>Hallo Matthias Apsel,</p>
<blockquote>
<p>ich möchte mich für ein Projekt von JQuery trennen.</p>
</blockquote>
<p>Ich glaube, ich möchte mich doch nicht damit umherärgern.</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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>del<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>diese Zeile löschen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>svg-inline--fa fa-minus-square fa-w-14<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- <i class="far fa-minus-square"></i> --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
</code></pre>
<p>Bei Klick auf den Button ist Firefox der Meinung, event.target sei das svg, IE11 meint event.target sei button.</p>
<p>Mit JQuery funktioniert es deutlich intuitiver. -meh</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769150#m1769150Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-04-19T13:24:33Z2020-04-19T13:24:33ZVanilla – best practice gesucht<p>Hallo alle,</p>
<p>danke für die Motivation.</p>
<p><a href="/images/87f65c94-8240-11ea-b288-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/87f65c94-8240-11ea-b288-b42e9947ef30.png?size=medium" alt="Screenshot github commit" loading="lazy"></a></p>
<p>ca. 600 Zeilen schlechtes JQuery entsorgt (u.a. schlecht, weil ich DRY nicht beachtet hatte bzw. nicht einhalten konnte). Jetzt ist es nur noch eine Stelle, an der JQuery verwendet wird.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769110#m1769110Felix Riestererhttps://felix-riesterer.de2020-04-18T07:25:39Z2020-04-18T07:25:39ZVanilla – best practice gesucht<p>Lieber Gunnar,</p>
<blockquote>
<pre><code class="block language-js">document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> do_A<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
<p>bist Du sicher, dass es nur das erste Element in <code class="language-javascript">document<span class="token punctuation">.</span>forms</code> braucht? Ich meine mich zu erinnern, dass <code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"form"</span><span class="token punctuation">)</span></code> <em>alle</em> <code><form></code>-Elemente findet. Dazu müsste man daher über <em>alle</em> Elemente in <code class="language-javascript">document<span class="token punctuation">.</span>forms</code> iterieren.</p>
<p>Liebe Grüße</p>
<p>Felix Riesterer</p>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769121#m1769121Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-04-18T09:33:18Z2020-04-18T09:33:18ZVanilla – best practice gesucht<p>Hallo Gunnar Bittersmann,</p>
<blockquote>
<pre><code class="block language-js">document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><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> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">do_B</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 class="token punctuation">;</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> do_A<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
<p>IE11 kann leider kein <code>=></code>.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769111#m1769111Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-04-18T07:27:20Z2020-04-18T07:27:20ZVanilla – best practice gesucht<p>Hallo Felix Riesterer,</p>
<p>erstmal vielen Dank. Weil du das Alter ansprichst: Ich muss IE11 unterstützen.</p>
<p>Würden dynamisch hinzukommende Buttons der Klasse foo auch die Funktion B auslösen?</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769116#m1769116Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-18T08:30:31Z2020-04-18T08:30:31ZVanilla – best practice gesucht<p>@@Felix Riesterer</p>
<blockquote>
<pre><code class="block bad language-javascript">document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"form"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">f</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</code></pre>
</blockquote>
<p>Nein, so nicht. <a href="https://forum.selfhtml.org/cites/2280" rel="noopener noreferrer">Das macht keinen Sinn.</a> – <a href="https://forum.selfhtml.org/self/2020/apr/14/slider-der-grosse-einer-box-verandert/1768992#m1768992" rel="noopener noreferrer">Immer noch nicht.</a></p>
<blockquote>
<pre><code class="block"> f.querySelectorAll(".foo").forEach(function (n) {
n.addEventListener("click", do_B);
});
</code></pre>
</blockquote>
<p>Warum das denn und nicht wie gehabt <em lang="en">event delegation</em>?</p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769112#m1769112Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-04-18T07:28:52Z2020-04-18T07:28:52ZVanilla – best practice gesucht<p>Hallo Felix Riesterer,</p>
<blockquote>
<p>bist Du sicher, dass es nur das erste Element in <code class="language-javascript">document<span class="token punctuation">.</span>forms</code> braucht?</p>
</blockquote>
<p>Hab ich nicht deutlich hinzugeschrieben: Es gibt nur ein Form auf der Seite.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769120#m1769120Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-18T09:25:01Z2020-04-18T09:25:01ZVanilla – best practice gesucht<p>@@Felix Riesterer</p>
<blockquote>
<blockquote>
<pre><code class="block language-js">document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> do_A<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
<p>bist Du sicher, dass es nur das erste Element in <code class="language-javascript">document<span class="token punctuation">.</span>forms</code> braucht?</p>
</blockquote>
<p>Wie Matthias sich ausdrückte, ja. <em>(„Ich habe ein Formular, für das …“)</em></p>
<p>Ich hätte aber korrekter schreiben sollen: <em>Das sollte <strong>in deinem Fall</strong> dasselbe tun</em>.</p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769113#m1769113Felix Riestererhttps://felix-riesterer.de2020-04-18T07:34:04Z2020-04-18T07:34:04ZVanilla – best practice gesucht<p>Lieber Matthias,</p>
<blockquote>
<p>Würden dynamisch hinzukommende Buttons der Klasse foo auch die Funktion B auslösen?</p>
</blockquote>
<p>nein. Die Verteilung der Eventlistener geschieht ja nur einmal. Wenn du aber dynamisch erzeugte später hinzugefügte Buttons unterstützen musst, dann musst Du das Event am <code><body></code> verankern:</p>
<pre><code class="block language-javascript">document<span class="token punctuation">.</span>body<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> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> target <span class="token operator">=</span> event<span class="token punctuation">.</span>target <span class="token operator">||</span> event<span class="token punctuation">.</span>srcElement<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>target<span class="token punctuation">.</span>className<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.foo\b</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">do_B</span><span class="token punctuation">(</span>event<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>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> target <span class="token operator">=</span> event<span class="token punctuation">.</span>target <span class="token operator">||</span> event<span class="token punctuation">.</span>srcElement<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>target<span class="token punctuation">.</span>className<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.foo\b</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">do_A</span><span class="token punctuation">(</span>event<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>
</code></pre>
<p>Ich habe keine Ahnung, ob IE11 <code class="language-javascript">classList</code> unterstützt, daher habe ich eine RegExp verwendet.</p>
<p>Liebe Grüße</p>
<p>Felix Riesterer</p>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769117#m1769117MudGuardhttp://www.andreas-waechter.de/2020-04-18T08:48:37Z2020-04-18T08:48:37ZVanilla – best practice gesucht<p>Hi,</p>
<blockquote>
<pre><code class="block language-javascript"> <span class="token keyword">if</span> <span class="token punctuation">(</span>target<span class="token punctuation">.</span>className<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.foo\b</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</code></pre>
</blockquote>
<p>Der Punkt im Regex möchte gerne ein b sein (also vor und nach foo eine Wortgrenze). Punkt kommt im Klassennamen nicht vor. Du gehst ja direkt auf's class-Attribut, im Gegensatz zu Matthias, der im Originalposting jQuery benutzt, wo der Punkt dazu da ist, jQuery klarzumachen, daß es ein Klassen-Selektor sein soll.</p>
<p>cu,<br>
Andreas a/k/a MudGuard</p>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769118#m1769118Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-18T08:51:58Z2020-04-18T08:51:58ZVanilla – best practice gesucht<p>@@Felix Riesterer</p>
<blockquote>
<p>Wenn du aber dynamisch erzeugte später hinzugefügte Buttons unterstützen musst, dann musst Du das Event am <code><body></code> verankern:</p>
</blockquote>
<p>Nö, musst du nicht. Ich würde das zugehörige <code>form</code>-Element nehmen, nicht wahllos irgendein Element zwischen dem Formular und der Wurzel.</p>
<blockquote>
<pre><code class="block bad language-javascript"> <span class="token keyword">if</span> <span class="token punctuation">(</span>target<span class="token punctuation">.</span>className<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.foo\b</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</code></pre>
<p>Ich habe keine Ahnung, ob IE11 <code class="language-javascript">classList</code> unterstützt, daher habe ich eine RegExp verwendet.</p>
</blockquote>
<p>Es ist einfacher, <a href="https://caniuse.com/#search=classList" rel="noopener noreferrer">sich die Ahnung zu verschaffen</a>, als einen RegExp zu verwenden. <a href="https://forum.selfhtml.org/cites/1225" rel="noopener noreferrer">Das macht nur Probleme.</a> Besonders, wenn der Ausdruck – wie bei dir – falsch ist.</p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769119#m1769119Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-18T09:21:23Z2020-04-18T09:21:23ZVanilla – best practice gesucht<p>@@MudGuard</p>
<blockquote>
<p>Der Punkt im Regex möchte gerne ein b sein</p>
</blockquote>
<p>Nö, der RegExp möchte gar nicht da sein. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes" rel="nofollow noopener noreferrer">Eine String-Funktion</a> würde es auch tun – wenn man mit <code>classList</code> nicht schon eine Liste hätte.</p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769137#m1769137MudGuardhttp://www.andreas-waechter.de/2020-04-18T13:42:08Z2020-04-18T13:42:08ZVanilla – best practice gesucht<p>Hi,</p>
<blockquote>
<p>Nö, der RegExp möchte gar nicht da sein. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes" rel="nofollow noopener noreferrer">Eine String-Funktion</a> würde es auch tun</p>
</blockquote>
<p>Nein, includes ist nicht geeignet, im class-Attribut auf das Vorhandensein der Klasse foo zu prüfen. Nur ein Narr (pun intended) würde das tun:</p>
<pre><code class="block language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"fool"</span><span class="token punctuation">.</span><span class="token function">includes</span><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>
</code></pre>
<p>cu,<br>
Andreas a/k/a MudGuard</p>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769127#m1769127Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-18T10:34:44Z2020-04-18T10:34:44ZVanilla – best practice gesucht<p>@@Matthias Apsel</p>
<blockquote>
<p>IE11 kann leider kein <code>=></code>.</p>
</blockquote>
<p>Na dann mach</p>
<pre><code class="block language-js">document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><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> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</code></pre>
<p>draus (wenn du keinen Transpiler einsetzt).</p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769128#m1769128Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-04-18T10:38:15Z2020-04-18T10:38:15ZVanilla – best practice gesucht<p>Hallo Gunnar Bittersmann,</p>
<blockquote>
<p>Na dann mach</p>
<pre><code class="block language-js">document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><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> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</code></pre>
<p>draus</p>
</blockquote>
<p>Hab ich schon </p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769131#m1769131Der Martin2020-04-18T10:56:19Z2020-04-18T10:56:19ZVanilla – best practice gesucht<p>Hallo,</p>
<blockquote>
<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>del<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>diese Zeile löschen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>svg-inline--fa fa-minus-square fa-w-14<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- <i class="far fa-minus-square"></i> --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
</code></pre>
<p>Bei Klick auf den Button ist Firefox der Meinung, event.target sei das svg</p>
</blockquote>
<p>was aber nur dann richtig ist, wenn du direkt auf das Bild klickst. Was ist aber beim Klick <em>neben</em> das Bild, aber immer noch auf den Button? Den Fall müsstest du doch sowieso mit berücksichtigen (es sei denn, das SVG-Bild deckt den Button zu 100% ab).</p>
<blockquote>
<p>IE11 meint event.target sei button.</p>
</blockquote>
<p>Ja, den hättest du dann quasi nebenbei auch noch bedient.</p>
<blockquote>
<p>Mit JQuery funktioniert es deutlich intuitiver. -meh</p>
</blockquote>
<p>Hmm. Die einen sagen so, die anderen so.</p>
<p>Live long and <s>pros</s> healthy,<br>
Martin</p>
<div class="signature">-- <br>
Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769132#m1769132Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-18T11:03:09Z2020-04-18T11:03:09ZVanilla – best practice gesucht<p>@@Matthias Apsel</p>
<blockquote>
<p>Bei Klick auf den Button ist Firefox der Meinung, event.target sei das svg, IE11 meint event.target sei button.</p>
</blockquote>
<p>Du willst also nicht <code class="language-js">event<span class="token punctuation">.</span>target</code>, sondern <code class="language-js">event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span></code>.</p>
<p>☞ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/closest" rel="nofollow noopener noreferrer">MDN</a> – Den Polyfill gibt’s da auch gleich mit.</p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769134#m1769134JürgenBhttps://www.j-berkemeier.de2020-04-18T11:11:20Z2020-04-18T11:11:20ZVanilla – best practice gesucht<p>Hallo Matthias,</p>
<blockquote>
<p>Ich glaube, ich möchte mich doch nicht damit umherärgern.</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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>del<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>diese Zeile löschen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>svg-inline--fa fa-minus-square fa-w-14<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- <i class="far fa-minus-square"></i> --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
</code></pre>
<p>Bei Klick auf den Button ist Firefox der Meinung, event.target sei das svg, IE11 meint event.target sei button.</p>
</blockquote>
<p>mit so etwas durfte ich mich auch beschäftigen. Such mal in <a href="https://wiki.selfhtml.org/wiki/Benutzer:J%C3%BCrgenB/Drag_and_Drop#Die_drei_Phasen_des_Drag_and_Drop" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/Benutzer:JürgenB/Drag_and_Drop#Die_drei_Phasen_des_Drag_and_Drop</a> nach der Funktion <code>parent</code></p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769159#m1769159Rolf B2020-04-19T17:22:13Z2020-04-19T17:23:08ZVanilla – best practice gesucht<p>Hallo Matthias,</p>
<p>das ist ein Grundproblem bei den Buttons. Ob Elemente im Inneren eines Buttons als Event Target angesehen werden oder nicht, wird von den Browsern unterschiedlich gehandhabt.</p>
<p>Einige Browser sehen HTML im Inneren eines Buttons nicht als Event Target und zeigen den Button als Target, andere schon. Da sind sich die Hersteller nicht einig.</p>
<p>Daher der Bedarf für das .closest('button').</p>
<p>Hm, Update. Es scheint sich vereinheitlicht zu haben. Ich meine, der Chrome hätte früher immer den Button als event.target gesetzt. Jetzt nicht mehr.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769133#m1769133Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-04-18T11:10:00Z2020-04-18T11:10:00ZVanilla – best practice gesucht<p>Hallo Gunnar Bittersmann,</p>
<blockquote>
<p>☞ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/closest" rel="nofollow noopener noreferrer">MDN</a> – Den Polyfill gibt’s da auch gleich mit.</p>
</blockquote>
<p>Den Polyfill brauche ich auch schon für do_B. Im Moment habe ich so ein Mischmasch zwischen JQuery und Vanilla. Das ist nicht schön.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769138#m1769138Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-18T13:58:05Z2020-04-18T13:58:05ZVanilla – best practice gesucht<p>@@MudGuard</p>
<blockquote>
<p>Nein, includes ist nicht geeignet, im class-Attribut auf das Vorhandensein der Klasse foo zu prüfen. Nur ein Narr (pun intended) würde das tun:</p>
<pre><code class="block language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"fool"</span><span class="token punctuation">.</span><span class="token function">includes</span><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>
</code></pre>
</blockquote>
<p lang="en">Foolish me.</p>
<p>Und der RegExp ist genausowenig geeignet:</p>
<pre><code class="block language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"foo-bar"</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\bfoo\b</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769140#m1769140MudGuardhttp://www.andreas-waechter.de/2020-04-18T14:22:43Z2020-04-18T14:22:43ZVanilla – best practice gesucht<p>Hi,</p>
<blockquote>
<p>Und der RegExp ist genausowenig geeignet:</p>
<pre><code class="block language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"foo-bar"</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\bfoo\b</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
<p>Da bin ich nicht firm genug in Javascript - da es unterschiedliche Implementierungen gibt, was ein word-character ist …</p>
<p>cu,<br>
Andreas a/k/a MudGuard</p>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769153#m1769153Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-19T14:53:42Z2020-04-19T14:53:42ZVanilla – best practice gesucht<p>@@Gunnar Bittersmann</p>
<blockquote>
<p>Und der RegExp ist genausowenig geeignet:</p>
</blockquote>
<p>Wenn man wirklich mit RegExp nach „foo“ in einer whitespace-separierten Liste suchen will (was man in diesem Fall nicht will), müsste man da wohl mit <code>(?:^|\s)foo(?:$|\s)</code> ran.</p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769152#m1769152Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-19T14:46:09Z2020-04-19T14:46:53ZVanilla – best practice gesucht<p>@@MudGuard</p>
<blockquote>
<p>da es unterschiedliche Implementierungen gibt, was ein word-character ist …</p>
</blockquote>
<p>Echt? Auch das noch!</p>
<p>Ich dachte, <em lang="en">word-characters</em> wären <code>[A-Za-z]</code> – was an sich auch schon Unsinn ist; damit ist <code>\b</code> für menschliche Sprachen ungeeignet, die diakritische Zeichen verwenden (von zusätzlichen Buchstaben wie ß und þ ganz abgesehen) – also für alle(?) Sprachen.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p>
<p>Das ist doch Müll:</p>
<pre><code class="block language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Müll'</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\bM\b</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Array [ "M" ]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Mull'</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\bM\b</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// null</span>
</code></pre>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Gibt es irgendeine natürliche Sprache, die das lateinische Alphabet ohne jegliche diakritische Zeichen verwendet? (Selbst im Latein werden doch lange Vokale mit Makron gekennzeichnet.) <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769157#m1769157MudGuardhttp://www.andreas-waechter.de/2020-04-19T16:13:25Z2020-04-19T16:13:25ZVanilla – best practice gesucht<p>Hi,</p>
<blockquote>
<blockquote>
<p>da es unterschiedliche Implementierungen gibt, was ein word-character ist …</p>
</blockquote>
<p>Echt? Auch das noch!</p>
</blockquote>
<p>ja. In manchen Sprachen sind word-characters alle Buchstaben, in manchen nur die aus dem ASCII-Bereich, mal gehören die Ziffern (mal nur ASCII, mal alle) dazu, weitere Varianten nicht ausgeschlossen.</p>
<blockquote>
<p>Ich dachte, <em lang="en">word-characters</em> wären <code>[A-Za-z]</code></p>
</blockquote>
<p>M.W. gehören die Ziffern 0-9 auch noch mit rein.</p>
<blockquote></blockquote>
<p>Englisch?</p>
<p>(ok, über die Natürlichkeit könnte man streiten )</p>
<p>cu,<br>
Andreas a/k/a MudGuard</p>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769175#m1769175Rolf B2020-04-20T10:03:11Z2020-04-20T11:05:51ZVanilla – best practice gesucht<p>Hallo Gunnar,</p>
<blockquote>
<p>Selbst im Latein werden doch lange Vokale mit Makron gekennzeichnet.</p>
</blockquote>
<p>Aber nur in Latein-Lehrbüchern.</p>
<p>(Ich frag mich ja, ob's dem Monsieur Le President recht ist, ein Flatliner zu sein...)</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769166#m1769166Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-20T05:03:19Z2020-04-20T05:03:19ZVanilla – best practice gesucht<p>@@MudGuard</p>
<blockquote>
<blockquote>
<p>Ich dachte, <em lang="en">word-characters</em> wären <code>[A-Za-z]</code></p>
</blockquote>
<p>M.W. gehören die Ziffern 0-9 auch noch mit rein.</p>
</blockquote>
<p>Klar, wegen Wörtern wie H1N1.</p>
<blockquote>
<blockquote>
<p>Gibt es irgendeine natürliche Sprache, die das lateinische Alphabet ohne jegliche diakritische Zeichen verwendet? (Selbst im Latein werden doch lange Vokale mit Makron gekennzeichnet.)</p>
</blockquote>
<p>Englisch?</p>
</blockquote>
<p>Das zu glauben wäre <em lang="en">naïve</em>. Zoë nickt zustimmend.</p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769162#m1769162Christian Krusehttps://wwwtech.de/2020-04-19T18:45:26Z2020-04-19T18:45:26ZVanilla – best practice gesucht<p>Hallo Rolf,</p>
<blockquote>
<p>Hm, Update. Es scheint sich vereinheitlicht zu haben. Ich meine, der Chrome hätte früher immer den Button als event.target gesetzt. Jetzt nicht mehr.</p>
</blockquote>
<p>Beide. Firefox und Chrome. Hat sich vor gar nicht so langer Zeit geändert; ich weiss noch, dass ich JS-Code deshalb anpassen musste.</p>
<p>Freundliche Grüße,<br>
Christian Kruse</p>
<div class="signature">-- <br>
<a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a>
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769183#m1769183Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-20T10:59:31Z2020-04-20T11:05:51ZVanilla – best practice gesucht<p>@@Rolf B</p>
<blockquote>
<blockquote>
<p>Selbst im Latein werden doch lange Vokale mit Makron gekennzeichnet.</p>
</blockquote>
<p>Aber nur in Latein-Lehrbüchern.</p>
</blockquote>
<p>Wenn man Latein so schreiben wollen würde wie es damals geschrieben wurde, als es noch geschrieben wurde … damals gab’s noch keine Kleinbuchstaben! </p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769188#m1769188Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-20T11:21:54Z2020-04-20T11:21:54ZVanilla – best practice gesucht<p>@@Rolf B</p>
<blockquote>
<blockquote>
<p>Selbst im Latein werden doch lange Vokale mit Makron gekennzeichnet.</p>
</blockquote>
<p>Aber nur in Latein-Lehrbüchern.</p>
</blockquote>
<p>Sieht man auch hin und wieder, wenn jemand Russisch zusammen-kopiert-und-kleistert:</p>
<p><em lang="ru">Ма́льчики, чита́ть уме́ете?</em><sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p>
<p>Äh, nö, Betonungszeichen gibt’s nur in Russisch-Lehrbüchern.</p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Mascha und der Bär, <a href="https://www.youtube.com/watch?v=E1Cdpliash8#t=2m44" rel="nofollow noopener noreferrer">Folge 55 ab 2:44</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769184#m1769184Rolf B2020-04-20T11:00:43Z2020-04-20T11:41:51ZVanilla – best practice gesucht<p>Hallo Gunnar,</p>
<p>ICHWEISSVNDLEERSTELLENAVCHNICHT</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769190#m1769190Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-04-20T11:43:06Z2020-04-20T11:43:06ZVanilla – best practice gesucht<p>@@Rolf B</p>
<blockquote>
<p>ICHWEISSVNDLEERSTELLENAVCHNICHT</p>
</blockquote>
<p>ICHVVEISSVNDVVVVARNOCHKEINEIGENERBVCHSTABE</p>
<p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p>
<div class="signature">-- <br>
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>)
</div>
https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769189#m1769189Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-04-20T11:24:06Z2020-04-20T11:24:06ZVanilla – best practice gesucht<p>Hallo Gunnar Bittersmann,</p>
<blockquote>
<p>Äh, nö, Betonungszeichen gibt’s nur in Russisch-Lehrbüchern.</p>
</blockquote>
<p>die es durchaus auch online geben kann.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Du kannst das Projekt SELFHTML unterstützen,<br>
indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt.
</div>