tag:forum.selfhtml.org,2005:/self Vanilla – best practice gesucht – SELFHTML-Forum 2020-04-20T11:43:06Z https://forum.selfhtml.org/self/2020/apr/18/vanilla-best-practice-gesucht/1769106#m1769106 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-04-18T06:19:06Z 2020-04-18T06:30:01Z Vanilla – 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#m1769107 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-18T07:10:43Z 2020-04-18T07:10:43Z Vanilla – 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#m1769109 Felix Riesterer https://felix-riesterer.de 2020-04-18T07:22:17Z 2020-04-18T07:22:17Z Vanilla – 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#m1769130 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-04-18T10:47:54Z 2020-04-18T10:47:54Z Vanilla – 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#m1769150 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-04-19T13:24:33Z 2020-04-19T13:24:33Z Vanilla – 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#m1769110 Felix Riesterer https://felix-riesterer.de 2020-04-18T07:25:39Z 2020-04-18T07:25:39Z Vanilla – 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#m1769121 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-04-18T09:33:18Z 2020-04-18T09:33:18Z Vanilla – 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#m1769111 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-04-18T07:27:20Z 2020-04-18T07:27:20Z Vanilla – 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#m1769116 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-18T08:30:31Z 2020-04-18T08:30:31Z Vanilla – 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#m1769112 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-04-18T07:28:52Z 2020-04-18T07:28:52Z Vanilla – 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#m1769120 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-18T09:25:01Z 2020-04-18T09:25:01Z Vanilla – 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#m1769113 Felix Riesterer https://felix-riesterer.de 2020-04-18T07:34:04Z 2020-04-18T07:34:04Z Vanilla – 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#m1769117 MudGuard http://www.andreas-waechter.de/ 2020-04-18T08:48:37Z 2020-04-18T08:48:37Z Vanilla – 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#m1769118 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-18T08:51:58Z 2020-04-18T08:51:58Z Vanilla – 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#m1769119 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-18T09:21:23Z 2020-04-18T09:21:23Z Vanilla – 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#m1769137 MudGuard http://www.andreas-waechter.de/ 2020-04-18T13:42:08Z 2020-04-18T13:42:08Z Vanilla – 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#m1769127 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-18T10:34:44Z 2020-04-18T10:34:44Z Vanilla – 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#m1769128 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-04-18T10:38:15Z 2020-04-18T10:38:15Z Vanilla – 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#m1769131 Der Martin 2020-04-18T10:56:19Z 2020-04-18T10:56:19Z Vanilla – 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#m1769132 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-18T11:03:09Z 2020-04-18T11:03:09Z Vanilla – 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#m1769134 JürgenB https://www.j-berkemeier.de 2020-04-18T11:11:20Z 2020-04-18T11:11:20Z Vanilla – 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#m1769159 Rolf B 2020-04-19T17:22:13Z 2020-04-19T17:23:08Z Vanilla – 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#m1769133 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-04-18T11:10:00Z 2020-04-18T11:10:00Z Vanilla – 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#m1769138 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-18T13:58:05Z 2020-04-18T13:58:05Z Vanilla – 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#m1769140 MudGuard http://www.andreas-waechter.de/ 2020-04-18T14:22:43Z 2020-04-18T14:22:43Z Vanilla – 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#m1769153 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-19T14:53:42Z 2020-04-19T14:53:42Z Vanilla – 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#m1769152 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-19T14:46:09Z 2020-04-19T14:46:53Z Vanilla – 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#m1769157 MudGuard http://www.andreas-waechter.de/ 2020-04-19T16:13:25Z 2020-04-19T16:13:25Z Vanilla – 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#m1769175 Rolf B 2020-04-20T10:03:11Z 2020-04-20T11:05:51Z Vanilla – 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#m1769166 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-20T05:03:19Z 2020-04-20T05:03:19Z Vanilla – 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#m1769162 Christian Kruse https://wwwtech.de/ 2020-04-19T18:45:26Z 2020-04-19T18:45:26Z Vanilla – 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#m1769183 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-20T10:59:31Z 2020-04-20T11:05:51Z Vanilla – 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#m1769188 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-20T11:21:54Z 2020-04-20T11:21:54Z Vanilla – 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#m1769184 Rolf B 2020-04-20T11:00:43Z 2020-04-20T11:41:51Z Vanilla – 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#m1769190 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-04-20T11:43:06Z 2020-04-20T11:43:06Z Vanilla – 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#m1769189 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-04-20T11:24:06Z 2020-04-20T11:24:06Z Vanilla – 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>