<?xml version="1.0" encoding="UTF-8"?> <rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
><channel><title>naden.de/blog &#187; Javascript</title> <atom:link href="http://www.naden.de/blog/category/javascript/feed" rel="self" type="application/rss+xml" /><link>http://www.naden.de/blog</link> <description>/* no comment */</description> <lastBuildDate>Fri, 30 Jul 2010 09:41:23 +0000</lastBuildDate> <generator>http://wordpress.org/?v=2.9.1</generator> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <item><title>Javascript Date Format</title><link>http://www.naden.de/blog/javascript-date-format</link> <comments>http://www.naden.de/blog/javascript-date-format#comments</comments> <pubDate>Fri, 30 Jul 2010 09:40:51 +0000</pubDate> <dc:creator>naden</dc:creator> <category><![CDATA[Javascript]]></category> <category><![CDATA[date]]></category> <category><![CDATA[datum]]></category> <category><![CDATA[format]]></category><guid
isPermaLink="false">http://www.naden.de/blog/?p=264</guid> <description><![CDATA[Um mit Javascript ein Datum im Format d.m.Y zu bekommen muss man leider immer etwas zu viel Code schreiben.
Die ausf&#252;hrliche Form w&#252;rde so aussehen und ist schon sehr grob:function getCurrentDate&#40;separator&#41; &#123;
var date = new Date&#40;&#41;;
var day = date.getDate&#40;&#41;;
var month = date.getMonth&#40;&#41; + 1;
var year = date.getFullYear&#40;&#41;;
[...]]]></description> <content:encoded><![CDATA[<p>Um mit Javascript ein Datum im Format d.m.Y zu bekommen muss man leider immer etwas zu viel Code schreiben.<span
id="more-264"></span></p><p>Die ausf&#252;hrliche Form w&#252;rde so aussehen und ist schon sehr grob:</p><div
class="wp_codebox"><table><tr
id="p2643"><td
class="code" id="p264code3"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> getCurrentDate<span style="color: #009900;">&#40;</span>separator<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> date <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> day <span style="color: #339933;">=</span> date.<span style="color: #660066;">getDate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> month <span style="color: #339933;">=</span> date.<span style="color: #660066;">getMonth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> year <span style="color: #339933;">=</span> date.<span style="color: #660066;">getFullYear</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> current_date <span style="color: #339933;">=</span> day <span style="color: #339933;">+</span> separator <span style="color: #339933;">+</span> month <span style="color: #339933;">+</span> separator <span style="color: #339933;">+</span> year<span style="color: #339933;">;</span> 
  <span style="color: #000066; font-weight: bold;">return</span> current_date<span style="color: #339933;">;</span>  
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div><p>Mit einem bischen Javascript Voodoo bekommt man das gleiche Ergebnis mit dem folgenden Codeschnipsel:</p><div
class="wp_codebox"><table><tr
id="p2644"><td
class="code" id="p264code4"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> getCurrentDate<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">with</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#91;</span>getDate<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> getMonth<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> getFullYear<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span>arguments<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">||</span> <span style="color: #3366CC;">'.'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>]]></content:encoded> <wfw:commentRss>http://www.naden.de/blog/javascript-date-format/feed</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Javascript Bookmark</title><link>http://www.naden.de/blog/javascript-bookmark</link> <comments>http://www.naden.de/blog/javascript-bookmark#comments</comments> <pubDate>Tue, 19 Jan 2010 20:16:37 +0000</pubDate> <dc:creator>naden</dc:creator> <category><![CDATA[Javascript]]></category> <category><![CDATA[Bookmark]]></category> <category><![CDATA[favorit]]></category> <category><![CDATA[favoriten]]></category><guid
isPermaLink="false">http://www.naden.de/blog/javascript-bookmark</guid> <description><![CDATA[Um per Javascript die aktuelle Webseite als Favorit im Browser zu speichern, gibt es die abenteuerlichsten L&#246;sungen. Noch heute liest man auf vielen Seiten, bei Firefox bitte Strg+D dr&#252;cken!
Meine L&#246;sung, die schon seit Jahren so wunderbar funktioniert sieht wie folgt aus:function bookmark&#40;url, title&#41; &#123;
// ist keine Url angegeben, wird der aktuelle Hostname genutzt
[...]]]></description> <content:encoded><![CDATA[<p>Um per Javascript die aktuelle Webseite als Favorit im Browser zu speichern, gibt es die abenteuerlichsten L&#246;sungen. Noch heute liest man auf vielen Seiten, bei Firefox bitte Strg+D dr&#252;cken!<span
id="more-149"></span></p><p>Meine L&#246;sung, die schon seit Jahren so wunderbar funktioniert sieht wie folgt aus:</p><div
class="wp_codebox"><table><tr
id="p1498"><td
class="code" id="p149code8"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> bookmark<span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> title<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #006600; font-style: italic;">// ist keine Url angegeben, wird der aktuelle Hostname genutzt</span>
  <span style="color: #003366; font-weight: bold;">var</span> url <span style="color: #339933;">=</span> url <span style="color: #339933;">||</span> location.<span style="color: #660066;">protocol</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'//'</span> <span style="color: #339933;">+</span> location.<span style="color: #660066;">host</span><span style="color: #339933;">;</span>
  <span style="color: #006600; font-style: italic;">// um die aktuelle Url zu bookmarken, die vorherige Zeile</span>
  <span style="color: #006600; font-style: italic;">// auskommentieren und die nächste einkommentieren.</span>
  <span style="color: #006600; font-style: italic;">// var url = url || location.href;</span>
&nbsp;
  <span style="color: #006600; font-style: italic;">// kein Titel angeg. wird der aktuelle Hostname benutzt</span>
  <span style="color: #003366; font-weight: bold;">var</span> title <span style="color: #339933;">=</span> title <span style="color: #339933;">||</span> location.<span style="color: #660066;">host</span><span style="color: #339933;">;</span>
  <span style="color: #006600; font-style: italic;">// um den Titel aktuelle Url zu bookmarken, die vorherige Zeile</span>
  <span style="color: #006600; font-style: italic;">// auskommentieren und die nächste einkommentieren.</span>
  <span style="color: #006600; font-style: italic;">// var title = document.title;</span>
&nbsp;
  <span style="color: #006600; font-style: italic;">// Internet Explorer</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">all</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		window.<span style="color: #660066;">external</span>.<span style="color: #660066;">AddFavorite</span><span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> title<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #006600; font-style: italic;">// Firefox</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">sidebar</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		window.<span style="color: #660066;">sidebar</span>.<span style="color: #660066;">addPanel</span><span style="color: #009900;">&#40;</span>title<span style="color: #339933;">,</span> url<span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
  <span style="color: #006600; font-style: italic;">// false zurückliefern, fall die Funktion</span>
  <span style="color: #006600; font-style: italic;">// über das &quot;onlick&quot;-Event des &lt;a&gt;-Tags</span>
  <span style="color: #006600; font-style: italic;">// aufgerufen wurde</span>
  <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span></pre></td></tr></table></div><p>Der Aufruf sieht z.B. so aus:</p><div
class="wp_codebox"><table><tr
id="p1499"><td
class="code" id="p149code9"><pre class="html" style="font-family:monospace;">&lt;a href=&quot;&quot; onclick=&quot;javascript:return bookmark();&quot;&gt;Bookmark&lt;/a&gt;</pre></td></tr></table></div><p>oder</p><div
class="wp_codebox"><table><tr
id="p14910"><td
class="code" id="p149code10"><pre class="html" style="font-family:monospace;">&lt;a href=&quot;&quot; onclick=&quot;javascript:return bookmark('Naden's Webseite', 'http://www.naden.de');&quot;&gt;Bookmark&lt;/a&gt;</pre></td></tr></table></div>]]></content:encoded> <wfw:commentRss>http://www.naden.de/blog/javascript-bookmark/feed</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>iframe Gr&#246;&#223;e automatisch anpassen</title><link>http://www.naden.de/blog/iframe-groesse-automatisch-anpassen</link> <comments>http://www.naden.de/blog/iframe-groesse-automatisch-anpassen#comments</comments> <pubDate>Tue, 03 Nov 2009 17:28:11 +0000</pubDate> <dc:creator>naden</dc:creator> <category><![CDATA[Javascript]]></category> <category><![CDATA[groesse]]></category> <category><![CDATA[height]]></category> <category><![CDATA[iframe]]></category> <category><![CDATA[resize]]></category> <category><![CDATA[width]]></category><guid
isPermaLink="false">http://www.naden.de/blog/iframe-groesse-automatisch-anpassen</guid> <description><![CDATA[Um aus einem iframe heraus dessen Gr&#246;&#223;e und Breite dynamisch an die H&#246;he des Inhalts anzupassen kann man den folgenden Javascript-Hack nutzen.function resizeFrame&#40;id, width, height&#41; &#123;
var f = window.parent.document.getElementById&#40;id&#41;;
if&#40;f&#41; &#123;
if&#40;f.contentDocument&#41; &#123;
if&#40;window.document == f.contentDocument&#41; [...]]]></description> <content:encoded><![CDATA[<p>Um aus einem iframe heraus dessen Gr&#246;&#223;e und Breite dynamisch an die H&#246;he des Inhalts anzupassen kann man den folgenden Javascript-Hack nutzen.<span
id="more-146"></span></p><div
class="wp_codebox"><table><tr
id="p14612"><td
class="code" id="p146code12"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> resizeFrame<span style="color: #009900;">&#40;</span>id<span style="color: #339933;">,</span> width<span style="color: #339933;">,</span> height<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> f <span style="color: #339933;">=</span> window.<span style="color: #660066;">parent</span>.<span style="color: #660066;">document</span>.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>f<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>f.<span style="color: #660066;">contentDocument</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">document</span> <span style="color: #339933;">==</span> f.<span style="color: #660066;">contentDocument</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          f.<span style="color: #660066;">height</span> <span style="color: #339933;">=</span> height<span style="color: #339933;">;</span>
          f.<span style="color: #660066;">width</span> <span style="color: #339933;">=</span> width<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
      <span style="color: #009900;">&#125;</span>
      <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>f.<span style="color: #660066;">contentWindow</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>window <span style="color: #339933;">==</span> f.<span style="color: #660066;">contentWindow</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          f.<span style="color: #660066;">height</span> <span style="color: #339933;">=</span> height<span style="color: #339933;">;</span>
          f.<span style="color: #660066;">width</span> <span style="color: #339933;">=</span> width<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span></pre></td></tr></table></div><p><em>Diesen sehr n&#252;tzlichen habe ich aus dem default Adsense Script von Google extrahiert und etwas angepasst.</em></p><p>Hier ein <a
href="http://www.naden.de/blog/wp-content/download/iframe-resize-index.html">Demo</a></p> ]]></content:encoded> <wfw:commentRss>http://www.naden.de/blog/iframe-groesse-automatisch-anpassen/feed</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Javascript konvertierung von Zahlen zwischen verschiedener Zahlensysteme</title><link>http://www.naden.de/blog/zahlen-konvertieren</link> <comments>http://www.naden.de/blog/zahlen-konvertieren#comments</comments> <pubDate>Tue, 27 Oct 2009 15:06:11 +0000</pubDate> <dc:creator>naden</dc:creator> <category><![CDATA[Javascript]]></category> <category><![CDATA[dezimal]]></category> <category><![CDATA[hexadezimal]]></category> <category><![CDATA[konvertieren]]></category> <category><![CDATA[zahlen]]></category><guid
isPermaLink="false">http://www.naden.de/blog/zahlen-konvertieren</guid> <description><![CDATA[Ich habe eine sehr gute L&#246;sung gefunden, um Zahlen mit Javascript zwischen verschiedenen Zahlenbasen zu konvertieren.function baseConvert&#40;n, to, from&#41; &#123;
return parseInt&#40;n, from &#124;&#124; 10&#41;.toString&#40;to&#41;;
&#125;
// Dezimal 10 nach Hexadezimal
baseConvert&#40;10, 16&#41;; // A
&#160;
// Hexadezimal 0xA (10) nach Bin&#228;r
baseConvert&#40;0xA, 2&#41;; // '1010'
&#160;
// oder
baseConvert&#40;'A', 2, 16&#41;; // '1010'Via: codesnippets.joyent.com
]]></description> <content:encoded><![CDATA[<p>Ich habe eine sehr gute L&#246;sung gefunden, um Zahlen mit Javascript zwischen verschiedenen Zahlenbasen zu konvertieren.<span
id="more-144"></span></p><div
class="wp_codebox"><table><tr
id="p14414"><td
class="code" id="p144code14"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> baseConvert<span style="color: #009900;">&#40;</span>n<span style="color: #339933;">,</span> to<span style="color: #339933;">,</span> from<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">return</span> parseInt<span style="color: #009900;">&#40;</span>n<span style="color: #339933;">,</span> from <span style="color: #339933;">||</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span>to<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #006600; font-style: italic;">// Dezimal 10 nach Hexadezimal</span>
baseConvert<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">10</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">16</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// A</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// Hexadezimal 0xA (10) nach Binär</span>
baseConvert<span style="color: #009900;">&#40;</span>0xA<span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// '1010'</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// oder</span>
baseConvert<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'A'</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">16</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// '1010'</span></pre></td></tr></table></div><p>Via: <a
href="http://codesnippets.joyent.com/posts/show/2256" rel="nofollow" target="_blank">codesnippets.joyent.com</a></p> ]]></content:encoded> <wfw:commentRss>http://www.naden.de/blog/zahlen-konvertieren/feed</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Javascript eval() Alternative</title><link>http://www.naden.de/blog/javascript-eval-alternative</link> <comments>http://www.naden.de/blog/javascript-eval-alternative#comments</comments> <pubDate>Mon, 28 Sep 2009 15:47:56 +0000</pubDate> <dc:creator>naden</dc:creator> <category><![CDATA[Javascript]]></category> <category><![CDATA[eval]]></category><guid
isPermaLink="false">http://www.naden.de/blog/javascript-eval-alternative</guid> <description><![CDATA[Auf ajaxian.com habe ich in eine nette Alternative zu eval() gefunden. Sehr spassig beim rumspielen mit dieser M&#246;glichkeit hat sich erstmal mein Virenscanner gemeldet.var code = 'alert(2);';
eval&#40;code&#41;;
// oder
new Function&#40;code&#41;&#40;&#41;;Via: ajaxian.com
]]></description> <content:encoded><![CDATA[<p>Auf ajaxian.com habe ich in eine nette Alternative zu <em>eval()</em> gefunden. Sehr spassig beim rumspielen mit dieser M&#246;glichkeit hat sich erstmal mein Virenscanner gemeldet.<span
id="more-142"></span></p><div
class="wp_codebox"><table><tr
id="p14216"><td
class="code" id="p142code16"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> code <span style="color: #339933;">=</span> <span style="color: #3366CC;">'alert(2);'</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#40;</span>code<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// oder</span>
<span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Function</span><span style="color: #009900;">&#40;</span>code<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Via: <a
href="http://ajaxian.com/archives/gmail-mobile-latency#comment-275568" target="_blank" rel="nofollow">ajaxian.com</a></p> ]]></content:encoded> <wfw:commentRss>http://www.naden.de/blog/javascript-eval-alternative/feed</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Expandable List Javascript &#8211; jQuery Plugin</title><link>http://www.naden.de/blog/expandable-list-javascript-jquery-plugin</link> <comments>http://www.naden.de/blog/expandable-list-javascript-jquery-plugin#comments</comments> <pubDate>Fri, 28 Aug 2009 10:59:41 +0000</pubDate> <dc:creator>naden</dc:creator> <category><![CDATA[Javascript]]></category> <category><![CDATA[collapsible]]></category> <category><![CDATA[expandable]]></category> <category><![CDATA[jquery]]></category> <category><![CDATA[li]]></category> <category><![CDATA[list]]></category> <category><![CDATA[toggle]]></category> <category><![CDATA[ul]]></category><guid
isPermaLink="false">http://www.naden.de/blog/expandable-list-javascript-jquery-plugin</guid> <description><![CDATA[Dieses jQuery Plugin wandelt eine mit &#60;ul&#62; erzeugte Liste in eine dynamische Variante um, die man auf und zu klappen kann. Dadurch k&#246;nnen sehr gro&#223;e Listen (z.B. verlinkte Tags) mit einigen Eintr&#228;gen angeteasert und bei Klick auf mehr um die restlichen Eintr&#228;ge erweitert werden. Die Liste ist komplett HTML und somit auch spiderbar. Zudem ist [...]]]></description> <content:encoded><![CDATA[<p>Dieses jQuery Plugin wandelt eine mit &lt;ul&gt; erzeugte Liste in eine dynamische Variante um, die man auf und zu klappen kann.<span
id="more-139"></span> Dadurch k&#246;nnen sehr gro&#223;e Listen (z.B. verlinkte Tags) mit einigen Eintr&#228;gen angeteasert und bei Klick auf mehr um die restlichen Eintr&#228;ge erweitert werden. Die Liste ist komplett HTML und somit auch spiderbar. Zudem ist kein zus&#228;tzliches CSS f&#252;r die Darstellung n&#246;tig.</p><p>Um alle Listen umzuwandeln reicht der folgende Aufruf:</p><div
class="wp_codebox"><table><tr
id="p13925"><td
class="code" id="p139code25"><pre class="html" style="font-family:monospace;">$('ul').expandablelist();</pre></td></tr></table></div><p>Aus</p><div
class="wp_codebox"><table><tr
id="p13926"><td
class="code" id="p139code26"><pre class="html" style="font-family:monospace;">&lt;ul&gt;
  &lt;li&gt;Item #1&lt;/li&gt;
  &lt;li&gt;Item #2&lt;/li&gt;
  &lt;li&gt;Item #3&lt;/li&gt;
  ...
  &lt;li&gt;Item #N&lt;/li&gt;
&lt;/ul&gt;</pre></td></tr></table></div><p>wird dadurch:</p><div
class="wp_codebox"><table><tr
id="p13927"><td
class="code" id="p139code27"><pre class="html" style="font-family:monospace;">&lt;ul&gt;
  &lt;li&gt;Item #1&lt;/li&gt;
  &lt;li&gt;Item #2&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;more&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;Item #3&lt;/li&gt;
  ...
  &lt;li&gt;Item #N&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;less&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre></td></tr></table></div><p>Um eine bestimmte Listen umzuwandeln:</p><div
class="wp_codebox"><table><tr
id="p13928"><td
class="code" id="p139code28"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#mylist'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">expandablelist</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Das ist die simpelste Variante. Das Plugin bringt eine F&#252;lle an Konfigurationsm&#246;glichkeiten mit, die auch global gesetzt werden k&#246;nnen.</p><p>M&#246;gliche Parameter und deren Standardwerte:</p><table><tr><th>Name</th><th>Standardwert</th><th>Beschreibung</th></tr><tr><td>count</td><td>2</td><td>breche nach X Eintr&#228;gen um</td></tr><tr><td>expanded</td><td>false</td><td>Darstellung der Liste</td></tr><tr><td>moreText</td><td>&#8216;more&#8217;</td><td>Text der &#8220;more&#8221; Buttons</td></tr><tr><td>lessText</td><td>&#8216;close&#8217;</td><td>Text des &#8220;close&#8221; Buttons</td></tr><tr><td>onClick</td><td>function(item, action, flag) {}</td><td>callback, wird 4 mal aufgerufen</td></tr><tr><td
colspan="3"><strong>item</strong>: Aufrufendes Element als this, <strong>action</strong>: &#8216;more&#8217; oder &#8216;less&#8217;, <strong>flag</strong>: 0 vor der Aktion, 1 nach der Aktion</td></tr><tr><td>moreClassA</td><td>&#8221;</td><td>classname des &#8220;more&#8221; Buttons</td></tr><tr><td>lessClassA</td><td>&#8221;</td><td>classname des &#8220;close&#8221; Buttons</td></tr><tr><td>moreClassLi</td><td>&#8221;</td><td>classname des &#8220;more&#8221; Buttons umschliessende &lt;li&gt;</td></tr><tr><td>lessClassLi</td><td>&#8221;</td><td>classname des &#8220;close&#8221; Buttons umschliessende &lt;li&gt;</td></tr></table><p><strong>Paramater &#252;bergeben</strong></p><div
class="wp_codebox"><table><tr
id="p13929"><td
class="code" id="p139code29"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">expandablelist</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>count<span style="color: #339933;">:</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Liste wird bricht ab dem 3. Eintrag um.</p><div
class="wp_codebox"><table><tr
id="p13930"><td
class="code" id="p139code30"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">expandablelist</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>expanded<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Liste wird ausgeklappt angezeigt.</p><div
class="wp_codebox"><table><tr
id="p13931"><td
class="code" id="p139code31"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">expandablelist</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>moreText<span style="color: #339933;">:</span><span style="color: #3366CC;">'mehr anzeigen'</span><span style="color: #339933;">,</span> lessText<span style="color: #339933;">:</span><span style="color: #3366CC;">'schliessen'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Liste mit angepassten Button-Texten</p><p><strong>Paramater global setzen</strong><br
/> Um einen Wert global zu setzen, z.B. den classname f&#252;r die Links, geht man wie folgt vor.  Das muss noch vor dem ersten Aufruf von <em>$().expandablelist();</em> geschehen.</p><div
class="wp_codebox"><table><tr
id="p13932"><td
class="code" id="p139code32"><pre class="javascript" style="font-family:monospace;">$.<span style="color: #660066;">fn</span>.<span style="color: #660066;">expandablelist</span>.<span style="color: #660066;">defaults</span>.<span style="color: #660066;">moreClassA</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'funky'</span><span style="color: #339933;">;</span>
$.<span style="color: #660066;">fn</span>.<span style="color: #660066;">expandablelist</span>.<span style="color: #660066;">defaults</span>.<span style="color: #660066;">lessClassA</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'funky'</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p><strong>Links:</strong><br
/> <a
href="http://www.naden.de/blog/wp-content/download/expandablelist-demo.html" target="_blank">Demo</a><br
/> <a
href="http://www.naden.de/blog/wp-content/download/jquery.expandablelist.min.js" target="_blank">Download minified</a><br
/> <a
href="http://www.naden.de/blog/wp-content/download/jquery.expandablelist.js" target="_blank">Download source</a></p> ]]></content:encoded> <wfw:commentRss>http://www.naden.de/blog/expandable-list-javascript-jquery-plugin/feed</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Javascript get url parameter</title><link>http://www.naden.de/blog/javascript-get-url-parameter</link> <comments>http://www.naden.de/blog/javascript-get-url-parameter#comments</comments> <pubDate>Tue, 25 Aug 2009 13:38:03 +0000</pubDate> <dc:creator>naden</dc:creator> <category><![CDATA[Javascript]]></category> <category><![CDATA[parameter]]></category> <category><![CDATA[url parameter]]></category><guid
isPermaLink="false">http://www.naden.de/blog/javascript-get-url-parameter</guid> <description><![CDATA[Um an ein eingezubindendes Javascript Parameter zu &#252;bergeben gib es zwei M&#246;glichkeiten. Entweder man definiert globale Variablen wie es z.B. bei Google Adsense gemacht wird, oder man &#252;bergibt die Werte direkt in der Url des Script-Tags.
Um nun die Nummer und die Hintergrundfarbe eines Widgets an den Loader zu &#252;bergeben k&#246;nnte der Aufruf wie folgt aussehen.&#60;script [...]]]></description> <content:encoded><![CDATA[<p>Um an ein eingezubindendes Javascript Parameter zu &#252;bergeben gib es zwei M&#246;glichkeiten. Entweder man definiert globale Variablen wie es z.B. bei Google Adsense gemacht wird, oder man &#252;bergibt die Werte direkt in der Url des Script-Tags.<span
id="more-138"></span></p><p>Um nun die Nummer und die Hintergrundfarbe eines Widgets an den Loader zu &#252;bergeben k&#246;nnte der Aufruf wie folgt aussehen.</p><div
class="wp_codebox"><table><tr
id="p13836"><td
class="code" id="p138code36"><pre class="html" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;loader.js?id=9021&amp;bgcolor=ff9900&quot;&gt;&lt;/script&gt;</pre></td></tr></table></div><p>Um auf die Werte innerhalb von <em>loader.js</em> zuzugreifen bedarf es eines kleinen Tricks, damit sich das Script sozusagen selber findet.</p><div
class="wp_codebox"><table><tr
id="p13837"><td
class="code" id="p138code37"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> scripts <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> script <span style="color: #339933;">=</span> scripts<span style="color: #009900;">&#91;</span>scripts.<span style="color: #660066;">length</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>script <span style="color: #339933;">!=</span> undefined<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>script.<span style="color: #660066;">src</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Es werden alle <em>script</em> Tags im aktuellen Dokument gesucht. Da unser Script zum Zeitpunkt des Einbindens aufgerufen wurde muss es das letzte in der Liste sein. Alle nachfolgenden Scripte sind uns nicht bekannt. Anders w&#252;rde der Fall liegen, wenn unser Script erst bei <em>document.onload</em> eingebunden worden w&#228;re.</p><p>In <em>script.src</em> steht nun unser Querystring <em>loader.js?id=9021&#038;bgcolor=ff9900</em> und muss nur noch geparst werden.</p><p>Mit der Funktion <em>getParamstringAsObject</em> aus <a
href="http://www.naden.de/blog/locationhash-in-objekt-umwandeln">diesem Beitrag</a> funktioniert das sehr einfach.</p><div
class="wp_codebox"><table><tr
id="p13838"><td
class="code" id="p138code38"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> scripts <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> script <span style="color: #339933;">=</span> scripts<span style="color: #009900;">&#91;</span>scripts.<span style="color: #660066;">length</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>script <span style="color: #339933;">!=</span> undefined<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #003366; font-weight: bold;">var</span> params <span style="color: #339933;">=</span> getParamstringAsObject<span style="color: #009900;">&#40;</span>script.<span style="color: #660066;">src</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'?'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>params<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// =&gt; {id:9021, bgcolor:'ff9900'}</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Die Variable <em>param</em> ist nun ein anonymes Objekt, was die urspr&#252;nglichen Parameter enth&#228;lt.</p> ]]></content:encoded> <wfw:commentRss>http://www.naden.de/blog/javascript-get-url-parameter/feed</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Javascript merge Objects</title><link>http://www.naden.de/blog/javascript-merge-objects</link> <comments>http://www.naden.de/blog/javascript-merge-objects#comments</comments> <pubDate>Mon, 24 Aug 2009 09:23:19 +0000</pubDate> <dc:creator>naden</dc:creator> <category><![CDATA[Javascript]]></category> <category><![CDATA[merge]]></category> <category><![CDATA[method]]></category> <category><![CDATA[methode]]></category> <category><![CDATA[object]]></category> <category><![CDATA[properties]]></category> <category><![CDATA[property]]></category><guid
isPermaLink="false">http://www.naden.de/blog/javascript-merge-objects</guid> <description><![CDATA[Oft ist es in Javascript notwendig, die Eigenschaften zweier eindimensionaler Objekte zusammenzuf&#252;hren (mergen) um z.B. immer einen definierten Zustand eines Objektes zu haben.
Ich benutze das sehr oft, wenn ich z.B. eine Form serialisiere und dieser vor dem Absenden via Ajax noch einige Parameter mitgeben m&#246;chte. jQuery bringt daf&#252;r die Funktion jQuery.extend mit. Mir fehlt dort [...]]]></description> <content:encoded><![CDATA[<p>Oft ist es in Javascript notwendig, die Eigenschaften zweier eindimensionaler Objekte zusammenzuf&#252;hren (mergen) um z.B. immer einen definierten Zustand eines Objektes zu haben.<span
id="more-137"></span></p><p>Ich benutze das sehr oft, wenn ich z.B. eine Form serialisiere und dieser vor dem Absenden via Ajax noch einige Parameter mitgeben m&#246;chte. jQuery bringt daf&#252;r die Funktion <em>jQuery.extend</em> mit. Mir fehlt dort allerdings die M&#246;glichkeit, zu entscheiden, ob ich existierende Eigenschaften &#252;berschreiben m&#246;chte oder nicht. Deshalb hier meine L&#246;sung mit dem zus&#228;tzlichen Paramater <em>overwrite</em>, der standardm&#228;&#223;ig auf <em>true</em> steht.</p><p>Hier die Funktion:</p><div
class="wp_codebox"><table><tr
id="p13741"><td
class="code" id="p137code41"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> mergeObjects<span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span> b<span style="color: #339933;">,</span> overwrite<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> k <span style="color: #000066; font-weight: bold;">in</span> b<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>overwrite <span style="color: #339933;">==</span> undefined <span style="color: #339933;">&amp;&amp;</span> k <span style="color: #000066; font-weight: bold;">in</span> a<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">continue</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    a<span style="color: #009900;">&#91;</span>k<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> b<span style="color: #009900;">&#91;</span>k<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">return</span> a<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div><p>Beispiel: Merge eine Objekt <em>params</em> mit einem Objekt <em>defaults</em></p><div
class="wp_codebox"><table><tr
id="p13742"><td
class="code" id="p137code42"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> defaults <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
  id<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
  module<span style="color: #339933;">:</span> <span style="color: #3366CC;">'comment'</span><span style="color: #339933;">,</span>
  method<span style="color: #339933;">:</span> <span style="color: #3366CC;">'add'</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> params <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
  id<span style="color: #339933;">:</span> <span style="color: #CC0000;">90</span><span style="color: #339933;">,</span>
  title<span style="color: #339933;">:</span> <span style="color: #3366CC;">'foo'</span><span style="color: #339933;">,</span>
  body<span style="color: #339933;">:</span> <span style="color: #3366CC;">'bar'</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
params <span style="color: #339933;">=</span> mergeObjects<span style="color: #009900;">&#40;</span>params<span style="color: #339933;">,</span> defaults<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// console.log(params); =&gt;  id=90 title=foo body=bar module=comment method=add</span>
&nbsp;
params <span style="color: #339933;">=</span> mergeObjects<span style="color: #009900;">&#40;</span>params<span style="color: #339933;">,</span> defaults<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// console.log(params); =&gt; id=0 title=foo body=bar module=comment method=add</span></pre></td></tr></table></div><p>Beim ersten Aufruf wird die Eigenschaft <em>id</em> &#252;berschrieben, beim zweiten Aufruf nicht, da der Parameter <em>overwrite</em> auf <em>false</em> gesetzt wurde.</p> ]]></content:encoded> <wfw:commentRss>http://www.naden.de/blog/javascript-merge-objects/feed</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Javascript Array</title><link>http://www.naden.de/blog/javascript-array</link> <comments>http://www.naden.de/blog/javascript-array#comments</comments> <pubDate>Fri, 21 Aug 2009 14:32:41 +0000</pubDate> <dc:creator>naden</dc:creator> <category><![CDATA[Javascript]]></category> <category><![CDATA[array]]></category> <category><![CDATA[javascript array]]></category><guid
isPermaLink="false">http://www.naden.de/blog/javascript-array</guid> <description><![CDATA[Arrays in Javascript bergen keine wirklichen Besonderheiten. Man kann sie auf zwei Arten definieren, ihr Index beginnt bei 0 und mit den g&#228;ngigen Methoden kann man sie bearbeiten. Um Probleme zu vermeiden sollte man Arrays m&#246;glichst im JSON Style mit [] definieren. Warum siehe Beipiel C und D.
Arrays definieren
Definiere ein neues Array ohne Werte und [...]]]></description> <content:encoded><![CDATA[<p>Arrays in Javascript bergen keine wirklichen Besonderheiten. Man kann sie auf zwei Arten definieren, ihr Index beginnt bei 0 und mit den g&#228;ngigen Methoden kann man sie bearbeiten. Um Probleme zu vermeiden sollte man Arrays m&#246;glichst im JSON Style mit [] definieren. Warum siehe Beipiel C und D.<span
id="more-136"></span></p><p><strong>Arrays definieren</strong></p><p>Definiere ein neues Array ohne Werte und L&#228;nge 0</p><div
class="wp_codebox"><table><tr
id="p13648"><td
class="code" id="p136code48"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#41;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span>
<span style="color: #006600; font-style: italic;">// Kurzform</span>
<span style="color: #003366; font-weight: bold;">var</span> b <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>b<span style="color: #009900;">&#41;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span></pre></td></tr></table></div><p>Definiere ein neues Array ohne Werte und L&#228;nge 1</p><div
class="wp_codebox"><table><tr
id="p13649"><td
class="code" id="p136code49"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>c<span style="color: #009900;">&#41;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#91;</span>undefined<span style="color: #009900;">&#93;</span></pre></td></tr></table></div><p>Definiere ein neues Array mit dem Wert 1 und L&#228;nge 1</p><div
class="wp_codebox"><table><tr
id="p13650"><td
class="code" id="p136code50"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> d <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>d<span style="color: #009900;">&#41;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span></pre></td></tr></table></div><p>Definiere ein neues Array mit den Werten 1 und 2 und der L&#228;nge 2</p><div
class="wp_codebox"><table><tr
id="p13651"><td
class="code" id="p136code51"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> e <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span></pre></td></tr></table></div><p>Definiere ein neues Array mit den Werten 1 und 2 und der L&#228;nge 2</p><div
class="wp_codebox"><table><tr
id="p13652"><td
class="code" id="p136code52"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> f <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>f<span style="color: #009900;">&#41;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span></pre></td></tr></table></div>]]></content:encoded> <wfw:commentRss>http://www.naden.de/blog/javascript-array/feed</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Javascript include once</title><link>http://www.naden.de/blog/javascript-include-once</link> <comments>http://www.naden.de/blog/javascript-include-once#comments</comments> <pubDate>Thu, 20 Aug 2009 12:58:22 +0000</pubDate> <dc:creator>naden</dc:creator> <category><![CDATA[Javascript]]></category> <category><![CDATA[include]]></category> <category><![CDATA[include javascript]]></category> <category><![CDATA[javascript include]]></category><guid
isPermaLink="false">http://www.naden.de/blog/javascript-include-once</guid> <description><![CDATA[Wie man Javascript Dateien dynamisch einbindet habe ich schon vor einiger Zeit hier (sehr veraltet) und hier beschrieben. Manchmal wenn z.B. diverse Widgetfunktionen dynamisch geladen werden sollen, w&#228;re ein wie aus PHP bekanntes include_once bzw. require_once n&#252;tzlich.
Hier das Scriptfunction include_once&#40;src&#41; &#123;
// hole alle vorhandenen Script-Elemente
var scripts = document.getElementsByTagName&#40;'script'&#41;;
if&#40;scripts&#41; &#123;
[...]]]></description> <content:encoded><![CDATA[<p>Wie man Javascript Dateien dynamisch einbindet habe ich schon vor einiger Zeit <a
href="http://www.naden.de/blog/include-mit-javascript">hier</a> (sehr veraltet) und <a
href="http://www.naden.de/blog/javascript-include-mit-document-object-model-dom-2">hier</a> beschrieben. Manchmal wenn z.B. diverse Widgetfunktionen dynamisch geladen werden sollen, w&#228;re ein wie aus PHP bekanntes <em>include_once</em> bzw. <em>require_once</em> n&#252;tzlich.<span
id="more-135"></span></p><p><strong>Hier das Script</strong></p><div
class="wp_codebox"><table><tr
id="p13555"><td
class="code" id="p135code55"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> include_once<span style="color: #009900;">&#40;</span>src<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #006600; font-style: italic;">// hole alle vorhandenen Script-Elemente</span>
  <span style="color: #003366; font-weight: bold;">var</span> scripts <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>scripts<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> k<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> k<span style="color: #339933;">&lt;</span>scripts.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> k<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #006600; font-style: italic;">// script schon geladen, abbrechen</span>
      <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>scripts<span style="color: #009900;">&#91;</span>k<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">src</span> <span style="color: #339933;">==</span> src<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span>
  <span style="color: #006600; font-style: italic;">// script noch nicht geladen, binde es ein</span>
  <span style="color: #003366; font-weight: bold;">var</span> script <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  script.<span style="color: #660066;">src</span> <span style="color: #339933;">=</span> src<span style="color: #339933;">;</span>
  script.<span style="color: #660066;">type</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'text/javascript'</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'HEAD'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">||</span> document.<span style="color: #660066;">body</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">&#40;</span>script<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div><p>Der Aufruf ist selbsterkl&#228;rend:</p><div
class="wp_codebox"><table><tr
id="p13556"><td
class="code" id="p135code56"><pre class="javascript" style="font-family:monospace;">include_once<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'http://domain.tld/js/scriptfile.js'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// oder</span>
include_once<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'http://domain.tld/js/myscript.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// oder</span>
include_once<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'http://domain.tld/js/scriptlet.js?pram=23'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>]]></content:encoded> <wfw:commentRss>http://www.naden.de/blog/javascript-include-once/feed</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
<!-- This site's performance optimized by W3 Total Cache. Dramatically improve the speed and reliability of your blog!

Learn more about our WordPress Plugins: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (user agent is rejected)
Database Caching 31/36 queries in 0.144 seconds using disk

Served from: arwen @ 2010-07-31 05:24:27 -->