<?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>Electricmonk.nl weblog &#187; javascript</title>
	<atom:link href="http://www.electricmonk.nl/log/category/programming/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.electricmonk.nl/log</link>
	<description>Ferry Boender&#039;s ramblings</description>
	<lastBuildDate>Mon, 16 Jan 2012 15:23:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Object Oriented Javascript</title>
		<link>http://www.electricmonk.nl/log/2006/03/04/object-oriented-javascript/</link>
		<comments>http://www.electricmonk.nl/log/2006/03/04/object-oriented-javascript/#comments</comments>
		<pubDate>Sat, 04 Mar 2006 08:25:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[I never really gave it much thought, but it turns out that, naturally, Javascript supports Object Oriented programming. It&#039;s a bit awkward, but still: /***************************************************************** * Class description *****************************************************************/ function MyClass&#40;param1, param2&#41; &#123; /*------------------------------------------------------------ * PROPERTIES *-----------------------------------------------------------*/ this.property1 = false; thisObj.eventHappened = false; &#160; /*------------------------------------------------------------ * METHODS *-----------------------------------------------------------*/ &#160; /** * method1 */ this.method1 = [...]]]></description>
			<content:encoded><![CDATA[<p>I never really gave it much thought, but it turns out that, naturally, Javascript supports Object Oriented programming. It&#039;s a bit awkward, but still:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/*****************************************************************
 * Class description
 *****************************************************************/</span>
<span style="color: #003366; font-weight: bold;">function</span> MyClass<span style="color: #009900;">&#40;</span>param1<span style="color: #339933;">,</span> param2<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">/*------------------------------------------------------------
     * PROPERTIES
     *-----------------------------------------------------------*/</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">property1</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
    thisObj.<span style="color: #660066;">eventHappened</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/*------------------------------------------------------------
     * METHODS
     *-----------------------------------------------------------*/</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/**
     * method1
     */</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">method1</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>param2<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">property1</span> <span style="color: #339933;">=</span> param2<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/*------------------------------------------------------------
     * CONSTRUCTOR
     *-----------------------------------------------------------*/</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">property2</span> <span style="color: #339933;">=</span> param1
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">method1</span><span style="color: #009900;">&#40;</span>param2<span style="color: #009900;">&#41;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">var</span> out <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
    out <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;&amp;lt;div id='&quot;</span><span style="color: #339933;">+</span>param1<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;'&amp;gt;&quot;</span><span style="color: #339933;">+</span>param2<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&amp;lt;/div&amp;gt;&quot;</span><span style="color: #339933;">;</span>
    document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>out<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">div1</span> <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>param1<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/*------------------------------------------------------------
     * EVENTS
     *-----------------------------------------------------------*/</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">/* Because 'this' in events is actually the event, we assign a
     * special variable here so we can reference this object from
     * the events.
     */</span>
    <span style="color: #003366; font-weight: bold;">var</span> thisObj <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">div1</span>.<span style="color: #660066;">onkeyup</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;key&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        thisObj.<span style="color: #660066;">eventHappened</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> myClassInstance <span style="color: #339933;">=</span> MyClass<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'myDiv'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Hello!'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.electricmonk.nl/log/2006/03/04/object-oriented-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Information harvested by NSA larger than acknowledged</title>
		<link>http://www.electricmonk.nl/log/2005/12/25/information-harvested-by-nsa-larger-than-acknowledged/</link>
		<comments>http://www.electricmonk.nl/log/2005/12/25/information-harvested-by-nsa-larger-than-acknowledged/#comments</comments>
		<pubDate>Sun, 25 Dec 2005 12:43:05 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[freedom and privacy]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[From Slashdot: The New York Times is reporting that the &#034;volume of information harvested from telecommunication data and voice networks, without court-approved warrants, is much larger than the White House has acknowledged.&#034; The NSA gained the cooperation of many American telecommunication companies after 9/11 to access streams of communication, both domestic and international, as a [...]]]></description>
			<content:encoded><![CDATA[<p>From <a href="http://yro.slashdot.org/yro/05/12/25/0029204.shtml?tid=158&amp;tid=215&amp;tid=219">Slashdot:</a><br />
<span class="quote"><a href="http://www.nytimes.com/2005/12/24/politics/24spy.html">The New York Times is reporting</a> that the &#034;volume of information harvested from telecommunication data and voice networks, without court-approved warrants, is much larger than the White House has acknowledged.&#034; The NSA gained the cooperation of many American telecommunication companies after 9/11 to access streams of communication, both domestic and international, as a part of a presidentially approved program to hunt for evidence of terrorist activity.</span><br />
What was it again? Oh yeah!</p>
<pre>First they came for the communists, and I did not speak out—
because I was not a communist;
Then they came for the socialists, and I did not speak out—
because I was not a socialist;
Then they came for the trade unionists, and I did not speak out—
because I was not a trade unionist;
Then they came for the Jews, and I did not speak out—
because I was not a Jew;
Then they came for me—
and there was no one left to speak out.</pre>
<p>&#8211; <em>Rev. Martin Niemöller</em></p>
<p><em>Land of the Free</em> indeed.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.electricmonk.nl/log/2005/12/25/information-harvested-by-nsa-larger-than-acknowledged/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Playground: Table column drag&#039;n&#039;drop resize</title>
		<link>http://www.electricmonk.nl/log/2005/05/19/playground-table-column-drag-n-drop-resize/</link>
		<comments>http://www.electricmonk.nl/log/2005/05/19/playground-table-column-drag-n-drop-resize/#comments</comments>
		<pubDate>Thu, 19 May 2005 09:05:19 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[I write web applications at my work and in them I frequently make use of tables displaying information. Unfortunatelly, everybody always keeps asking &#039;Can you increase the size of this or that limited table column?&#039;. Normally, we use tooltips to display contents that has been cut off, but that often requires some users to mouse-over [...]]]></description>
			<content:encoded><![CDATA[<p>I write web applications at my work and in them I frequently make use of tables displaying information. Unfortunatelly, everybody always keeps asking &#039;Can you increase the size of this or that limited table column?&#039;. Normally, we use tooltips to display contents that has been cut off, but that often requires some users to mouse-over all rows just to be able to see the full contents.</p>
<p>So I was thinking, wouldn&#039;t it be possible to use javascript to dynamically resize table columns? Here&#039;s a little <a href="http://www.electricmonk.nl/data/miscellaneous/playground/drag_tbl.html">Proof-of-concept</a>. It only works in Firefox and is still rather clunky. That&#039;s because it started out as a general page element dragger, and was then rebuilt (or rather, adapted) to also resize table columns. Still, this is proof that it <strong>can</strong> be done.</p>
<p>Now I just need:</p>
<ul>
<li class="noblock">Removable columns</li>
<li class="noblock">Editable cell contens</li>
<li class="noblock">database fields that can be dragged into the table on-the-fly without having to do a reload</li>
<li class="noblock">etc, etc.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.electricmonk.nl/log/2005/05/19/playground-table-column-drag-n-drop-resize/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Playground: Online Webbased TicTacToe</title>
		<link>http://www.electricmonk.nl/log/2005/03/28/playground-online-webbased-tictactoe/</link>
		<comments>http://www.electricmonk.nl/log/2005/03/28/playground-online-webbased-tictactoe/#comments</comments>
		<pubDate>Mon, 28 Mar 2005 18:59:27 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[Here&#039;s a little TicTacToe game which can be played online in your browser against an reallife opponent. Everything is interactive, no need to refresh anything. It uses XMLHttpRequest to do Client 2 Server 2 Client communications.]]></description>
			<content:encoded><![CDATA[<p>Here&#039;s a <a href="http://www.electricmonk.nl/data/miscellaneous/playground/tictactoe/">little TicTacToe game</a> which can be played online in your browser against an reallife opponent. Everything is interactive, no need to refresh anything. It uses XMLHttpRequest to do Client 2 Server 2 Client communications.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.electricmonk.nl/log/2005/03/28/playground-online-webbased-tictactoe/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WebGUI toolkit: A (small) proof-of-concept</title>
		<link>http://www.electricmonk.nl/log/2005/03/24/webgui-toolkit-a-small-proof-of-concept/</link>
		<comments>http://www.electricmonk.nl/log/2005/03/24/webgui-toolkit-a-small-proof-of-concept/#comments</comments>
		<pubDate>Thu, 24 Mar 2005 18:15:09 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[Felt a little better today (I&#039;ve got the flu), so I decided to do some hacking. I had this idea for a while about building a WebGUI toolkit with Widgets and all that stuff. So I made a little Proof-of-Concept. More (just barely) information can be found in the Playground. Imagine what you could do [...]]]></description>
			<content:encoded><![CDATA[<p>Felt a little better today (I&#039;ve got the flu), so I decided to do some hacking. I had this idea for a while about building a WebGUI toolkit with Widgets and all that stuff. So I made a little <a href="http://www.electricmonk.nl/data/miscellaneous/playground/webgui/index.php">Proof-of-Concept</a>. More (just barely) information can be found in the <a href="http://www.electricmonk.nl/index.php?page=Playground">Playground</a>.</p>
<p>Imagine what you could do if you linked this up with XMLHttpRequest! Awesome. Gonna test that out soon.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.electricmonk.nl/log/2005/03/24/webgui-toolkit-a-small-proof-of-concept/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>XMLHttpRequest</title>
		<link>http://www.electricmonk.nl/log/2004/12/14/xmlhttprequest/</link>
		<comments>http://www.electricmonk.nl/log/2004/12/14/xmlhttprequest/#comments</comments>
		<pubDate>Tue, 14 Dec 2004 08:12:55 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[tech]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[I&#039;ve heard about XMLHttpRequest before, but never really gave it much attention. Which means I didn&#039;t even know what it was supposed to do, and therefor never looked into it further. Turns out it&#039;s pretty neat though. If you&#039;re a webdeveloper, you must know how we deal with stuff like changing the values in a [...]]]></description>
			<content:encoded><![CDATA[<p>I&#039;ve heard about XMLHttpRequest before, but never really gave it much attention. Which means I didn&#039;t even know what it was supposed to do, and therefor never looked into it further.</p>
<p>Turns out it&#039;s pretty neat though. If you&#039;re a webdeveloper, you must know how we deal with stuff like changing the values in a dropdown box depending on a chosen value in another dropdown box? You either send all possible information with the page when you construct it and then use Javascript to fill in the information on demand. Or you submit a form when something is chosen by the user and fill in the information server-side. </p>
<p>XMLHttpRequests let&#039;s you retrieve information from the server using a client-side Javascript XML object without requiring a page reload. In essance, it&#039;s a mixture between the two hacky methods mentioned above. </p>
<p>For more information, check out <a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">this article</a>. An <a href="http://developer.apple.com/internet/webcontent/XMLHttpRequestExample/example.html">example </a> is also present. While that example is nice, I like <a href="http://www.google.com/webhp?complete=1&#038;hl=en">this one better</a>.</p>
<p>I only had time to quickly skim through the article, so I&#039;m still left with some more researching to do:
<ul>
<li>What about security? Can we XML request over a secure connection?</li>
<li>Do we have to transfer server-side session ID&#039;s manually?</li>
<li>Any complete frameworks available where have a XMLHttpRequest enabled front-end (client side) which queries a bunch of server-side pages which in their turn query the database (or stored XML information) and return information in XML?</li>
<li>Can this be a nice platform for three-tire webapplications?</li>
</ul>
<p><sub>(Thanks to <a href="http://www.joelonsoftware.com/index.html">Joel On Software</a> for posting about this)</sub></p>
]]></content:encoded>
			<wfw:commentRss>http://www.electricmonk.nl/log/2004/12/14/xmlhttprequest/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>I hate&#8230;.</title>
		<link>http://www.electricmonk.nl/log/2004/09/09/i-hate/</link>
		<comments>http://www.electricmonk.nl/log/2004/09/09/i-hate/#comments</comments>
		<pubDate>Thu, 09 Sep 2004 13:36:43 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[opinion]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[It should speak for itself because, you know, who doesn&#039;t.. but still: I HATE Javascript. Really. I bloody hate it. I&#039;m not even going to explain why I hate it. If you don&#039;t know, you should try working with it some time. It&#039;s hilarious, truely! I mean.. even location.href=&#8230;. has undocumented behaviour. Such a simple [...]]]></description>
			<content:encoded><![CDATA[<p>It should speak for itself because, you know, who doesn&#039;t.. but still:</p>
<p><font size=4>I <b>HATE</b> Javascript</font>. Really. I bloody hate it. I&#039;m not even going to explain why I hate it. If you don&#039;t know, you should try working with it some time. It&#039;s hilarious, truely! I mean.. even location.href=&#8230;. has undocumented behaviour. Such a simple piece of code. Same goes for location.replace() and location.reload(). </p>
<p>I hate it. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.electricmonk.nl/log/2004/09/09/i-hate/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

