tag:forum.selfhtml.org,2005:/self Javascript wird nicht geladen – SELFHTML-Forum 2016-07-04T07:20:16Z https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670316#m1670316 twb thomas.weibel@bluewin.ch http://www.thomasweibel.ch 2016-07-03T12:22:26Z 2016-07-03T12:22:26Z Javascript wird nicht geladen <p>Liebe alle - in meinem neuesten Projekt bin ich auf ein eigenartiges Problem gestossen. Anlässlich des <a href="http://make.opendata.ch/wiki/event:2016-07" rel="nofollow noopener noreferrer">zweiten Schweizer Kultur-Hackathons</a> habe ich ein Projekt realisiert, das darin bestand, eine Illustration der mittelalterlichen Manesse-Liederhandschrift interaktiv zu machen. Die Illustration zeigt <a href="https://commons.wikimedia.org/wiki/Codex_Manesse#/media/File:Codex_Manesse_262v_Herr_Goeli.jpg" rel="nofollow noopener noreferrer">zwei Männer beim Backgammon-Spiel</a>, und ich habe in diese Malerei aus dem Hochmittelalter hinein ein funktionsfähiges Backgammonspiel integriert. Das Game wird von einer <a href="http://thomasweibel.ch/manesse-gammon/backgammon.js" rel="nofollow noopener noreferrer">kleinen KI</a> angetrieben, die ich bereits vor einigen Jahren in Javascript geschrieben habe.</p> <p>Die <a href="http://thomasweibel.ch/manesse-gammon/" rel="nofollow noopener noreferrer">Home-Seite des Projekts</a> enthält Informationen über die Handschrift und diese eine Illustration; ein Klick auf das Bild oder den Play-Button führt zur eigentlichen, aus Gründen der Narration in Mittelhochdeutsch gehaltenen Gameseite thomasweibel.ch/manesse-gammon/backgammon.html (die ich hier nicht direkt verlinken kann, weil das SELFHTML-Forum eine fehlende Übersetzung beanstandet). Unterhalb des Spielfelds finden sich die spielwichtigen Buttons Neu, Pass, Undo und Quit (von links).</p> <p>Solange sich der Spieler an die Navigation via Buttons hält, funktioniert alles in allen getesteten Browsern (Firefox Win, Edge Win, Firefox Linux, Chromium Linux, Safari iOS und Chrome iOS). Erzwingt man aber einen Reload der Gameseite mittels F5 oder Reload-Button, wird das <a href="http://thomasweibel.ch/manesse-gammon/backgammon.js" rel="nofollow noopener noreferrer">Skript</a> nicht mehr geladen (Fehler tritt auf in FF Win 47.0.1 und in FF Linux 47.0), und die Seite bleibt bis auf den Spielhintergrund leer. Eigenartigerweise zeigt die Javascript-Konsole keinerlei Fehler an, und auch ein Codecheck via <a href="http://jshint.com/" rel="nofollow noopener noreferrer">JSHint</a> ergibt keinen Fehler. Für hilfreiche Tipps bin ich sehr dankbar.</p> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670329#m1670329 Google weiß alles 2016-07-03T14:34:27Z 2016-07-03T15:19:06Z Javascript wird nicht geladen <p>Da load und reload zwei durchaus verschiedene "Sachen" sind würde ich, gerade weil keiner in die Konsole meckert, bei</p> <pre><code class="block"><body onload="preloadImages()"> </code></pre> <p>ansetzen. Vielleicht kommt statt</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token special-attr"><span class="token attr-name">onload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">preloadImages</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>canvas<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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>screen<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>noscript</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Enable Javascript to play Manesse Gammon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>noscript</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p>etwas wie:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>canvas<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>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>screen<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>noscript</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Enable Javascript to play Manesse Gammon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>noscript</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token function">preloadImages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p>einfach besser.</p> <p>Ohne dass dieses was mit dem Problem zu tun hat: ware ein Funktionsname wie init_sonstwas() nicht schlauer? preloadImages() ist nicht gerade naheliegend wenn man nur das JS-File anschaut. Eine Funktion dieses Namens ist verbreitet für das Cachen noch nicht gezeigter Bilder zuständig.</p> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670330#m1670330 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-07-03T14:51:09Z 2016-07-03T15:19:37Z Javascript wird nicht geladen <p><a href="http://thomasweibel.ch/manesse-gammon/backgammon.html" rel="nofollow noopener noreferrer">http://thomasweibel.ch/manesse-gammon/backgammon.html</a></p> <p>Fehlende Übersetzung?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670332#m1670332 twb 2016-07-03T14:53:33Z 2016-07-03T14:53:33Z Javascript wird nicht geladen <p>Treffer - herzlichen Dank! Ich habe den Eventhandler im <body>-Tag entfernt und am Seitenende</p> <pre><code class="block language-js"> <span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span> <span class="token function">preloadImages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> </code></pre> <p>eingefügt. Auch wenn ich den Grund nach wie vor nicht kenne - jetzt läuft das Skript auch bei Reload bzw. Force Reload in Firefox.</p> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670335#m1670335 twb 2016-07-03T15:09:54Z 2016-07-03T15:09:54Z Javascript wird nicht geladen <blockquote> <p>Ohne dass dieses was mit dem Problem zu tun hat: ware ein Funktionsname wie init_sonstwas() nicht schlauer? preloadImages() ist nicht gerade naheliegend wenn man nur das JS-File anschaut. Eine Funktion dieses Namens ist verbreitet für das Cachen noch nicht gezeigter Bilder zuständig.</p> </blockquote> <p>Eigentlich tut preloadImages() ja genau das, nicht?</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">preloadImages</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> imageNumber<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> images<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">'eins.jpg'</span><span class="token punctuation">,</span><span class="token string">'zwei.png'</span><span class="token punctuation">,</span><span class="token string">'drei.png'</span><span class="token punctuation">,</span><span class="token string">'siebzehn.gif'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// Prevent game from starting while images are loading</span> picture<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator"><</span>images<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> picture<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> picture<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>onload<span class="token operator">=</span>checkPreload<span class="token punctuation">;</span> picture<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>src<span class="token operator">=</span>images<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">checkPreload</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Count images in cache, start game when preload is complete</span> imageNumber<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>imageNumber<span class="token operator">==</span>images<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token function">setupGame</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670333#m1670333 Google weiß alles 2016-07-03T14:58:33Z 2016-07-03T14:58:33Z Javascript wird nicht geladen <blockquote> <p>Fehlende Übersetzung?</p> </blockquote> <p>Hab ich jetzt auch nicht gesehen. Aber wenn man das http[s]:// weglässt, dann reagiert der Linksetzer merkwürdig. Also soweit man <em>"gar nicht"</em> mit <em>"merkwürdig"</em> beschreiben will.</p> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670334#m1670334 twb 2016-07-03T15:03:12Z 2016-07-03T15:03:12Z Javascript wird nicht geladen <blockquote> <p>Fehlende Übersetzung?</p> </blockquote> <p>Jein. Ja - das Dokument ist (ich weiss, wie idiotisch das klingt) in Mittelhochdeutsch gehalten, und das lang-Attribut kennt das Sprachenkürzel "mhd" nicht. Nein - die mittelhochdeutschen Sprachausgaben sind per Tooltip ins Englische übersetzt.</p> <p>Danke trotzdem: Tatsächlich hatte ich nämlich als Dokumentsprache "en" angegeben, was natürlich falsch ist (korrigiert auf "de"). Im übrigen ist das <a href="https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670329#m1670329" rel="noopener noreferrer">Problem gelöst</a>.</p> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670336#m1670336 Der Martin 2016-07-03T15:14:04Z 2016-07-03T15:18:55Z Javascript wird nicht geladen <p>Hallo,</p> <blockquote> <p>Treffer - herzlichen Dank! Ich habe den Eventhandler im <body>-Tag entfernt und am Seitenende</p> <pre><code class="block language-js"> <span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span> <span class="token function">preloadImages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> </code></pre> <p>eingefügt. Auch wenn ich den Grund nach wie vor nicht kenne - jetzt läuft das Skript auch bei Reload bzw. Force Reload in Firefox.</p> </blockquote> <p>das klingt durchaus glaubwürdig, weil es wohl unter bestimmten Umständen vorkommt, dass das load-Event im Firefox nicht feuert, wenn das Dokument aus dem Browser-Cache und nicht frisch vom Server geholt wird.</p> <p>So long,<br>  Martin</p> <div class="signature">-- <br> Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.<br> - Douglas Adams, The Hitchhiker's Guide To The Galaxy </div> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670337#m1670337 Google weiß alles 2016-07-03T15:14:06Z 2016-07-03T15:14:06Z Javascript wird nicht geladen <blockquote> <p>Im übrigen ist das <a href="https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670329#m1670329" rel="noopener noreferrer">Problem gelöst</a>.</p> </blockquote> <p>Ja. Ich stehe ja mangels einer Teilnahme am Programm nicht im Verdacht auf die Bonusmeilen zu schielen, aber es wäre erfreulich würde des sich durchsetzen, den Beitrag mit der Lösung als "akzeptierte" Lösung zu markieren oder in der Antwort etwas wie "Danke" oder "Gelöst" als Subjekt zu setzen, damit es sofort erkennbar wird. Jeder, der es macht ist ein "beispielgebendes Vorbild".</p> <p>Da das Problem nun gelöst ist:</p> <p><strong>ToDo:</strong></p> <ul> <li>Auf HTML5 umstellen, damit Du künftig weniger Arbeit hast (siehe das dann obsolete, fingergelenkverschleißende und tippfehleranfällige <code>type="javascript"</code>.</li> <li>Die Funktion preloadImages() umbenennen.</li> </ul> <p>Dann ist auch eine schöne Referenz.</p> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670355#m1670355 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-07-03T18:08:42Z 2016-07-04T07:16:29Z Javascript wird nicht geladen <p>@@twb</p> <blockquote> <p>das lang-Attribut kennt das Sprachenkürzel "mhd" nicht.</p> </blockquote> <p>In <a href="https://www.w3.org/International/questions/qa-html-language-declarations" rel="nofollow noopener noreferrer">Angabe der Sprache in HTML</a> findest du den Verweis „Verwenden Sie die Sprachkürzel aus dem <a href="http://www.iana.org/assignments/language-subtag-registry" rel="nofollow noopener noreferrer">IANA-Register für Sprachkürzel</a>.“</p> <p>Wenn du darin nach „German“ suchst, findest du den Eintrag:</p> <pre><code class="block">Type: language Subtag: gmh Description: Middle High German (ca. 1050-1500) Added: 2005-10-16 </code></pre> <p>Hätteste auch noch einfacher haben können. <a href="https://de.wikipedia.org/wiki/Mittelhochdeutsch" rel="nofollow noopener noreferrer">Wikipedia: Mittelhochdeutsch</a>, Sprachcodes in der Tabelle rechts.</p> <p>LLAP </p> <div class="signature">-- <br> <em>“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.”</em> —Vitaly Friedman in <a href="https://www.smashingmagazine.com/2016/06/inclusive-design-patterns/" rel="nofollow noopener noreferrer">Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”</a><br> <em><a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: <code>sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|</code></em> </div> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670338#m1670338 Google weiß alles 2016-07-03T15:20:52Z 2016-07-03T15:26:15Z Javascript wird nicht geladen <blockquote> <p>Eigentlich tut preloadImages() ja genau das, nicht?</p> </blockquote> <p>Ja. Aber nicht nur:</p> <pre><code class="block language-js"><span class="token function">preloadImages</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> picture<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>onload<span class="token operator">=</span>checkPreload<span class="token punctuation">;</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">checkPreload</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token function">setupGame</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> <p>Also mir gefallen diese Verkettungen nicht. Ich würde lieber mit <code>setupGame()</code> starten und von dort das <code>preloadImages()</code> anschieben ...</p> <p>Zumal ja setupGame() scheinbar ungewollt mehrfach (für jedes vorgeladene Bild) stattfindet. Ich weiß es nicht genau, bezweifle aber, dass dieses Deinem Plan entspricht.</p> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670339#m1670339 twb 2016-07-03T15:24:18Z 2016-07-03T15:24:18Z Javascript wird nicht geladen <blockquote> <p>Ja. Ich stehe ja mangels einer Teilnahme am Programm nicht im Verdacht auf die Bonusmeilen zu schielen, aber es wäre erfreulich würde des sich durchsetzen, den Beitrag mit der Lösung als "akzeptierte" Lösung zu markieren</p> </blockquote> <p>Yep. Done.</p> <blockquote> <ul> <li>Auf HTML5 umstellen, damit Du künftig weniger Arbeit hast (siehe das dann obsolete, fingergelenkverschleißende und tippfehleranfällige <code>type="javascript"</code>.</li> </ul> </blockquote> <p>Ist schon länger geplant, aber, weil noch (D)HTML 4, nach wie vor noch Fingergelenke zerfetzend.</p> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670340#m1670340 twb 2016-07-03T15:49:54Z 2016-07-03T15:49:54Z Javascript wird nicht geladen <blockquote> <p>Zumal ja setupGame() scheinbar ungewollt mehrfach (für jedes vorgeladene Bild) stattfindet.</p> </blockquote> <p>Nein. setupGame() wird nur einmal angeworfen. Zwar läuft checkPreload() nach jedem vorgeladenen Bild ab, aber dabei wird nur die Variable imageNumber hochgezählt. Erst wenn sämtliche Bilder vorgeladen sind,</p> <pre><code class="block language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>imageNumber<span class="token operator">==</span>images<span class="token punctuation">.</span>length<span class="token punctuation">)</span> </code></pre> <p>wird setupGame() gestartet.</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">checkPreload</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> imageNumber<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>imageNumber<span class="token operator">==</span>images<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token function">setupGame</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670341#m1670341 Google weiß alles 2016-07-03T15:57:06Z 2016-07-03T15:57:06Z Javascript wird nicht geladen <blockquote> <blockquote> <p>Zumal ja setupGame() scheinbar ungewollt mehrfach (für jedes vorgeladene Bild) stattfindet.</p> </blockquote> <p>Nein. setupGame() wird nur einmal angeworfen.</p> </blockquote> <p>Ach so. Ja. Klar.</p> <p>Aber Du siehst an meinem Fehler, was die ungünstige Funktionsverschachtelung für Irrtümer erregen kann...</p> https://forum.selfhtml.org/self/2016/jul/3/javascript-wird-nicht-geladen/1670371#m1670371 twb 2016-07-04T07:20:16Z 2016-07-04T07:20:16Z Javascript wird nicht geladen <blockquote> <p>Subtag: gmh</p> </blockquote> <p>Tatsächlich! Ein mittelhochdeutscher Sprachcode für Webseiten schien mir derart abseitig, dass ich nicht im entferntesten auf den Gedanken gekommen bin, nachzusehen... Korrigiert. Danke!</p>