<?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>BBQIguana &#187; Javascript</title>
	<atom:link href="http://www.bbqiguana.com/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bbqiguana.com</link>
	<description></description>
	<lastBuildDate>Fri, 23 Jul 2010 14:41:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>String formatting for Javascript</title>
		<link>http://www.bbqiguana.com/2009/11/string-formatting-for-javascript/</link>
		<comments>http://www.bbqiguana.com/2009/11/string-formatting-for-javascript/#comments</comments>
		<pubDate>Mon, 02 Nov 2009 23:03:11 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.bbqiguana.com/?p=1149</guid>
		<description><![CDATA[Today, I was asked by a C# developer if Javascript has any string formatting functions comparable to the String.Format() method in C#.  I thought about it for a few minutes, going over the possibilities of regular expressions in my head, but finally settled on giving him a simple extension to Javascript's String object.]]></description>
			<content:encoded><![CDATA[<p>Today, I was asked by a C# developer if Javascript has any string formatting functions comparable to the String.Format() method in C#.</p>
<p>I thought about it for a few minutes, going over the possibilities of regular expressions in my head, but finally settled on giving him a simple extension to Javascript&#8217;s String object.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">String.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">format</span> <span style="color: #339933;">=</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> str <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</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>arguments.<span style="color: #660066;">length</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> str<span style="color: #339933;">;</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> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>arguments.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'{'</span><span style="color: #339933;">+</span>i<span style="color: #339933;">+</span><span style="color: #3366CC;">'}'</span><span style="color: #339933;">,</span> arguments<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">return</span> str<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>This simple function gives your Javascript strings the exact same formatting ability they would have in C#.</p>
<p>Test it out for yourself:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> s <span style="color: #339933;">=</span> <span style="color: #3366CC;">'Hello, {0}, I am {1}, and I am {2} to meet you.'</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span> <span style="color: #009900;">&#40;</span>s.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'foo'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'bar'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'baz'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.bbqiguana.com/2009/11/string-formatting-for-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS Blinker</title>
		<link>http://www.bbqiguana.com/2009/10/css-blinker/</link>
		<comments>http://www.bbqiguana.com/2009/10/css-blinker/#comments</comments>
		<pubDate>Tue, 06 Oct 2009 19:19:05 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.bbqiguana.com/?p=136</guid>
		<description><![CDATA[The secret to user-friendly forms in web apps is to draw attention to errors before submitting the form, and to do so without accosting the user with irritating Javscript popups.]]></description>
			<content:encoded><![CDATA[<p>The secret to user-friendly forms in web apps is to draw attention to errors before submitting the form, and to do so without accosting the user with irritating Javscript popups.</p>
<p>After filling in half a dozen (or more) form fields and then pressing the submit button, the user has mentally moved on.  Suddenly hearing a &#8220;clunk&#8221; sound and getting a popup that says &#8220;invalid ssn&#8221; is jarring to say they least&#8230; but it also means the user must now read through all the form labels looking for something that sounds like &#8220;invalid ssn&#8221;.</p>
<p>My solution is to flash the form field drawing the user&#8217;s attention to exactly what information needs to be fixed.  And for that, I have created <a href="/js/Blinker.js">Blinker.js</a>.</p>
<p>Just include Blinker.js into your page. Then, during validation, when a field is not valid, just call Blinker:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">Blinker.<span style="color: #660066;">blink</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'element-id'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'error-classname'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Blinker uses the supplied CSS classname to do the <em>blinking</em>, so you can use any effect you want:  change the text color, change the background, underline, add a border, whatever floats your boat.  Just declare the desired style in your CSS and then use that class name in your call, along with the DOM ID of the element to flash.</p>
<p>The <em>scrollTo</em> option allows Blinker to scroll a field into the viewport if it&#8217;s not visible.  The <em>onDelay</em> and <em>offDelay</em> allow you to customize the rate of blinking, and <em>cycle</em> determines the number of times to flash.</p>
<div class="link-summarizer"><p><strong>Links in this post</strong><ul><li><a href='/js/Blinker.js'>/js/Blinker.js</a></li></ul></p></div>]]></content:encoded>
			<wfw:commentRss>http://www.bbqiguana.com/2009/10/css-blinker/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Recursive script inclusion with REQUIRE (C#)</title>
		<link>http://www.bbqiguana.com/2009/10/recursive-script-inclusion-with-require-c/</link>
		<comments>http://www.bbqiguana.com/2009/10/recursive-script-inclusion-with-require-c/#comments</comments>
		<pubDate>Thu, 01 Oct 2009 20:54:46 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[.net]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.bbqiguana.com/?p=144</guid>
		<description><![CDATA[This is the C# version of the script I posted earlier.  It's also available as a VB.net version.]]></description>
			<content:encoded><![CDATA[<p>This is the C# version of the script I posted earlier.  It&#8217;s also available as a <a href="/2009/10/recursive-script-inclusion-with-require/">VB.net version</a>.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
</pre></td><td class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF;">using</span> <span style="color: #008080;">System</span><span style="color: #008000;">;</span>
<span style="color: #0600FF;">using</span> <span style="color: #008080;">System.Collections</span><span style="color: #008000;">;</span>
<span style="color: #0600FF;">using</span> <span style="color: #008080;">System.IO</span><span style="color: #008000;">;</span>
<span style="color: #0600FF;">using</span> <span style="color: #008080;">System.Web</span><span style="color: #008000;">;</span>
&nbsp;
<span style="color: #0600FF;">public</span> <span style="color: #0600FF;">partial</span> <span style="color: #FF0000;">class</span> javascript <span style="color: #008000;">:</span> <span style="color: #000000;">System.<span style="color: #0000FF;">Web</span>.<span style="color: #0000FF;">UI</span></span>.<span style="color: #0000FF;">Page</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #0600FF;">private</span> Stack files<span style="color: #008000;">;</span>
&nbsp;
	<span style="color: #0600FF;">protected</span> <span style="color: #0600FF;">void</span> Page_Load<span style="color: #000000;">&#40;</span><span style="color: #FF0000;">object</span> sender, EventArgs e<span style="color: #000000;">&#41;</span>
    <span style="color: #000000;">&#123;</span>
		files <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> Stack<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
		Response.<span style="color: #0000FF;">ContentType</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;application/x-javascript&quot;</span><span style="color: #008000;">;</span>
		Response.<span style="color: #0000FF;">Write</span><span style="color: #000000;">&#40;</span>GetFile<span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;js/Contacts.js&quot;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
	<span style="color: #000000;">&#125;</span>
&nbsp;
	<span style="color: #0600FF;">private</span> <span style="color: #FF0000;">string</span> GetFile<span style="color: #000000;">&#40;</span><span style="color: #FF0000;">string</span> path<span style="color: #000000;">&#41;</span>
	<span style="color: #000000;">&#123;</span>
		<span style="color: #FF0000;">string</span> result <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;&quot;</span><span style="color: #008000;">;</span>
		<span style="color: #FF0000;">string</span> filespec <span style="color: #008000;">=</span> HttpContext.<span style="color: #0000FF;">Current</span>.<span style="color: #0000FF;">Request</span>.<span style="color: #0000FF;">PhysicalApplicationPath</span> <span style="color: #008000;">+</span>
						 path.<span style="color: #0000FF;">Replace</span><span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;/&quot;</span>, <span style="color: #666666;">&quot;<span style="color: #008080; font-weight: bold;">\\</span>&quot;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
		filespec <span style="color: #008000;">=</span> Path.<span style="color: #0000FF;">GetFullPath</span><span style="color: #000000;">&#40;</span>filespec<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
		<span style="color: #008080; font-style: italic;">//if the file is already loaded, then exit</span>
		<span style="color: #0600FF;">if</span><span style="color: #000000;">&#40;</span>files.<span style="color: #0000FF;">Contains</span><span style="color: #000000;">&#40;</span>filespec<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>
			<span style="color: #0600FF;">return</span> <span style="color: #666666;">&quot;&quot;</span><span style="color: #008000;">;</span>
&nbsp;
		<span style="color: #008080; font-style: italic;">//add this file to the loaded list</span>
		files.<span style="color: #0000FF;">Push</span><span style="color: #000000;">&#40;</span>filespec<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
		<span style="color: #008080; font-style: italic;">//load the file</span>
		<span style="color: #FF0000;">string</span> s <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;&quot;</span><span style="color: #008000;">;</span>
		<span style="color: #FF0000;">bool</span> b <span style="color: #008000;">=</span> false<span style="color: #008000;">;</span>
		<span style="color: #0600FF;">try</span> <span style="color: #000000;">&#123;</span>
			StreamReader sr <span style="color: #008000;">=</span> File.<span style="color: #0000FF;">OpenText</span><span style="color: #000000;">&#40;</span>filespec<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
			<span style="color: #0600FF;">do</span> <span style="color: #000000;">&#123;</span>
				b <span style="color: #008000;">=</span> true<span style="color: #008000;">;</span>
				s <span style="color: #008000;">=</span> sr.<span style="color: #0000FF;">ReadLine</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">+</span> <span style="color: #666666;">&quot;<span style="color: #008080; font-weight: bold;">\n</span>&quot;</span><span style="color: #008000;">;</span>
				<span style="color: #0600FF;">if</span><span style="color: #000000;">&#40;</span>s.<span style="color: #0000FF;">IndexOf</span><span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;//LIBRARY:&quot;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">==</span> <span style="color: #FF0000;">0</span><span style="color: #000000;">&#41;</span>
					b <span style="color: #008000;">=</span> false<span style="color: #008000;">;</span>
&nbsp;
				<span style="color: #0600FF;">if</span><span style="color: #000000;">&#40;</span>s.<span style="color: #0000FF;">IndexOf</span><span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;//REQUIRES:&quot;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">==</span> <span style="color: #FF0000;">0</span><span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
					b <span style="color: #008000;">=</span> false<span style="color: #008000;">;</span>
					s <span style="color: #008000;">=</span> s.<span style="color: #0000FF;">Replace</span><span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;//REQUIRES:&quot;</span>, <span style="color: #666666;">&quot;&quot;</span><span style="color: #000000;">&#41;</span>.<span style="color: #0000FF;">Trim</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
					result <span style="color: #008000;">=</span> result <span style="color: #008000;">+</span> GetFile<span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;..&quot;</span> <span style="color: #008000;">+</span> s<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
					s <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;&quot;</span><span style="color: #008000;">;</span>
				<span style="color: #000000;">&#125;</span>
				result <span style="color: #008000;">=</span> result <span style="color: #008000;">+</span> s<span style="color: #008000;">;</span>
			<span style="color: #000000;">&#125;</span> <span style="color: #0600FF;">while</span> <span style="color: #000000;">&#40;</span>sr.<span style="color: #0000FF;">Peek</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">!=</span> <span style="color: #008000;">-</span><span style="color: #FF0000;">1</span> <span style="color: #008000;">&amp;&amp;</span> <span style="color: #008000;">!</span>b<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
			result <span style="color: #008000;">=</span> result <span style="color: #008000;">+</span> sr.<span style="color: #0000FF;">ReadToEnd</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">+</span> <span style="color: #666666;">&quot;<span style="color: #008080; font-weight: bold;">\n</span>&quot;</span><span style="color: #008000;">;</span>
			sr.<span style="color: #0000FF;">Close</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
		<span style="color: #000000;">&#125;</span> <span style="color: #0600FF;">catch</span> <span style="color: #000000;">&#123;</span>
			result <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;<span style="color: #008080; font-weight: bold;">\n</span>/* Error loading file: &quot;</span> <span style="color: #008000;">+</span> filespec <span style="color: #008000;">+</span> <span style="color: #666666;">&quot; */<span style="color: #008080; font-weight: bold;">\n</span>&quot;</span>
		<span style="color: #000000;">&#125;</span>
		<span style="color: #0600FF;">return</span> result<span style="color: #008000;">;</span>
    <span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<div class="link-summarizer"><p><strong>Links in this post</strong><ul><li><a href='/2009/10/recursive-script-inclusion-with-require/'>/2009/10/recursive-sc...clusion-with-require/</a></li></ul></p></div>]]></content:encoded>
			<wfw:commentRss>http://www.bbqiguana.com/2009/10/recursive-script-inclusion-with-require-c/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Recursive script inclusion with REQUIRE</title>
		<link>http://www.bbqiguana.com/2009/10/recursive-script-inclusion-with-require/</link>
		<comments>http://www.bbqiguana.com/2009/10/recursive-script-inclusion-with-require/#comments</comments>
		<pubDate>Thu, 01 Oct 2009 19:16:49 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[VB.net]]></category>

		<guid isPermaLink="false">http://www.bbqiguana.com/?p=132</guid>
		<description><![CDATA[One thing that tends to seriously limit the "best practices" when it comes to enterprise development and code reuse for Javascript is a lack of INCLUDE or REQUIRE functionality.]]></description>
			<content:encoded><![CDATA[<p>One thing that tends to seriously limit the &#8220;best practices&#8221; when it comes to enterprise development and code reuse for Javascript is a lack of INCLUDE or REQUIRE functionality.</p>
<p>Code reuse and portability requires various functionality to be compartmentalized into individual .js files containing only related functionality, but on the web, including several files means making lots of unnecessary roundtrips, which can add up to a huge performance cost in the load time of your pages.</p>
<p>Good compartmentalized code also necessitates some sort of REQUIRE mechanism, which allows one unit of code (ie, script file) to specify when it won&#8217;t run properly without another unit of code.</p>
<p>Thus, while working on a VB.Net project, I created this simple Javascript loader, which looks at the name of the directory in which an app resides, and then looks for a javascript file by that name and loads it.  Directives can be placed in that Javascript file (and in any subsequent file) requiring the inclusion of additional script files.</p>
<p>Not only does this allow for easier inclusion of libraries as needed, but it also makes it easier to strip out unused code if/when it is no longer needed by an app.</p>
<p>This source code is also available in a <a href="/2009/10/recursive-script-inclusion-with-require-c/">C# version</a>.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
</pre></td><td class="code"><pre class="vbnet" style="font-family:monospace;"><span style="color: #0600FF;">Imports</span> System.<span style="color: #0000FF;">IO</span>
&nbsp;
Partial <span style="color: #0600FF;">Class</span> javascript
	<span style="color: #0600FF;">Inherits</span> System.<span style="color: #0000FF;">Web</span>.<span style="color: #0000FF;">UI</span>.<span style="color: #0000FF;">Page</span>
&nbsp;
	<span style="color: #FF8000;">Private</span> <span style="color: #008000;">files</span> <span style="color: #FF8000;">As</span> Stack
&nbsp;
	Protected <span style="color: #0600FF;">Sub</span> Page_Load<span style="color: #000000;">&#40;</span><span style="color: #FF8000;">ByVal</span> sender <span style="color: #FF8000;">As</span> <span style="color: #FF0000;">Object</span>, <span style="color: #FF8000;">ByVal</span> e <span style="color: #FF8000;">As</span> System.<span style="color: #0000FF;">EventArgs</span><span style="color: #000000;">&#41;</span> <span style="color: #FF8000;">Handles</span> <span style="color: #FF8000;">Me</span>.<span style="color: #0000FF;">Load</span>
		<span style="color: #008000;">files</span> <span style="color: #008000;">=</span> <span style="color: #FF8000;">New</span> Stack<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>
		Response.<span style="color: #0000FF;">ContentType</span> <span style="color: #008000;">=</span> <span style="color: #808080;">&quot;application/x-javascript&quot;</span>
		Response.<span style="color: #0600FF;">Write</span><span style="color: #000000;">&#40;</span>GetFile<span style="color: #000000;">&#40;</span><span style="color: #808080;">&quot;js/Contacts.js&quot;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>
	<span style="color: #0600FF;">End</span> <span style="color: #0600FF;">Sub</span>
&nbsp;
	<span style="color: #FF8000;">Private</span> <span style="color: #0600FF;">Function</span> GetFile<span style="color: #000000;">&#40;</span><span style="color: #FF8000;">ByVal</span> path <span style="color: #FF8000;">As</span> <span style="color: #FF8000;">String</span><span style="color: #000000;">&#41;</span> <span style="color: #FF8000;">As</span> <span style="color: #FF8000;">String</span>
		<span style="color: #0600FF;">Dim</span> result <span style="color: #FF8000;">As</span> <span style="color: #FF8000;">String</span> <span style="color: #008000;">=</span> <span style="color: #808080;">&quot;&quot;</span>
		<span style="color: #0600FF;">Dim</span> filespec <span style="color: #FF8000;">As</span> <span style="color: #FF8000;">String</span> <span style="color: #008000;">=</span> HttpContext.<span style="color: #0000FF;">Current</span>.<span style="color: #0000FF;">Request</span>.<span style="color: #0000FF;">PhysicalApplicationPath</span> <span style="color: #008000;">&amp;</span> path.<span style="color: #0600FF;">Replace</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">&quot;/&quot;</span>, <span style="color: #808080;">&quot;\&quot;</span><span style="color: #000000;">&#41;</span>
&nbsp;
		filespec <span style="color: #008000;">=</span> IO.<span style="color: #0000FF;">Path</span>.<span style="color: #0000FF;">GetFullPath</span><span style="color: #000000;">&#40;</span>filespec<span style="color: #000000;">&#41;</span>
&nbsp;
		<span style="color: #008080; font-style: italic;">'if the file is already loaded, then exit</span>
		<span style="color: #0600FF;">If</span> <span style="color: #008000;">files</span>.<span style="color: #0000FF;">Contains</span><span style="color: #000000;">&#40;</span>filespec<span style="color: #000000;">&#41;</span> <span style="color: #FF8000;">Then</span> <span style="color: #FF8000;">Return</span> <span style="color: #808080;">&quot;&quot;</span>
&nbsp;
		<span style="color: #008080; font-style: italic;">'add this file to the loaded list</span>
		<span style="color: #008000;">files</span>.<span style="color: #0000FF;">Push</span><span style="color: #000000;">&#40;</span>filespec<span style="color: #000000;">&#41;</span>
&nbsp;
		<span style="color: #008080; font-style: italic;">'load the file</span>
		<span style="color: #0600FF;">Dim</span> s <span style="color: #FF8000;">As</span> <span style="color: #FF8000;">String</span> <span style="color: #008000;">=</span> <span style="color: #808080;">&quot;&quot;</span>
		<span style="color: #0600FF;">Dim</span> b <span style="color: #FF8000;">As</span> <span style="color: #FF0000;">Boolean</span> <span style="color: #008000;">=</span> <span style="color: #0600FF;">False</span>
		<span style="color: #0600FF;">Try</span>
			<span style="color: #0600FF;">Dim</span> sr <span style="color: #FF8000;">As</span> StreamReader <span style="color: #008000;">=</span> <span style="color: #008000;">File</span>.<span style="color: #0000FF;">OpenText</span><span style="color: #000000;">&#40;</span>filespec<span style="color: #000000;">&#41;</span>
			<span style="color: #0600FF;">Do</span>
				b <span style="color: #008000;">=</span> <span style="color: #0600FF;">True</span>
				s <span style="color: #008000;">=</span> sr.<span style="color: #0000FF;">ReadLine</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">&amp;</span> vbCrLf
				<span style="color: #0600FF;">If</span> s.<span style="color: #0000FF;">IndexOf</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">&quot;//LIBRARY:&quot;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=</span> <span style="color: #FF0000;">0</span> <span style="color: #FF8000;">Then</span>
					b <span style="color: #008000;">=</span> <span style="color: #0600FF;">False</span>
				<span style="color: #0600FF;">End</span> <span style="color: #0600FF;">If</span>
				<span style="color: #0600FF;">If</span> s.<span style="color: #0000FF;">IndexOf</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">&quot;//REQUIRES:&quot;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">=</span> <span style="color: #FF0000;">0</span> <span style="color: #FF8000;">Then</span>
					b <span style="color: #008000;">=</span> <span style="color: #0600FF;">False</span>
					s <span style="color: #008000;">=</span> s.<span style="color: #0600FF;">Replace</span><span style="color: #000000;">&#40;</span><span style="color: #808080;">&quot;//REQUIRES:&quot;</span>, <span style="color: #808080;">&quot;&quot;</span><span style="color: #000000;">&#41;</span>.<span style="color: #0600FF;">Trim</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>
					result <span style="color: #008000;">=</span> result <span style="color: #008000;">&amp;</span> GetFile<span style="color: #000000;">&#40;</span><span style="color: #808080;">&quot;..&quot;</span> <span style="color: #008000;">&amp;</span> s<span style="color: #000000;">&#41;</span>
					s <span style="color: #008000;">=</span> <span style="color: #808080;">&quot;&quot;</span>
				<span style="color: #0600FF;">End</span> <span style="color: #0600FF;">If</span>
				result <span style="color: #008000;">=</span> result <span style="color: #008000;">&amp;</span> s
			<span style="color: #0600FF;">Loop</span> <span style="color: #0600FF;">While</span> sr.<span style="color: #0000FF;">Peek</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> &lt;&gt; <span style="color: #008000;">-</span><span style="color: #FF0000;">1</span> <span style="color: #804040;">And</span> <span style="color: #804040;">Not</span> b
			result <span style="color: #008000;">=</span> result <span style="color: #008000;">&amp;</span> sr.<span style="color: #0000FF;">ReadToEnd</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span> <span style="color: #008000;">&amp;</span> vbCrLf
			sr.<span style="color: #0600FF;">Close</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>
		<span style="color: #0600FF;">Catch</span> ex <span style="color: #FF8000;">As</span> Exception
			result <span style="color: #008000;">=</span> vbCrLf <span style="color: #008000;">&amp;</span> <span style="color: #808080;">&quot;/* Error loading file: &quot;</span> <span style="color: #008000;">&amp;</span> filespec <span style="color: #008000;">&amp;</span> <span style="color: #808080;">&quot; */&quot;</span> <span style="color: #008000;">&amp;</span> vbCrLf
		<span style="color: #0600FF;">End</span> <span style="color: #0600FF;">Try</span>
&nbsp;
		<span style="color: #FF8000;">Return</span> result
	<span style="color: #0600FF;">End</span> <span style="color: #0600FF;">Function</span>
&nbsp;
<span style="color: #0600FF;">End</span> <span style="color: #0600FF;">Class</span></pre></td></tr></table></div>

<p>This could be easily updated to work for CSS files as well.</p>
<div class="link-summarizer"><p><strong>Links in this post</strong><ul><li><a href='/2009/10/recursive-script-inclusion-with-require-c/'>/2009/10/recursive-sc...usion-with-require-c/</a></li></ul></p></div>]]></content:encoded>
			<wfw:commentRss>http://www.bbqiguana.com/2009/10/recursive-script-inclusion-with-require/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript XML extensions</title>
		<link>http://www.bbqiguana.com/2009/09/javascript-xml-extensions/</link>
		<comments>http://www.bbqiguana.com/2009/09/javascript-xml-extensions/#comments</comments>
		<pubDate>Fri, 25 Sep 2009 19:13:50 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[XML]]></category>

		<guid isPermaLink="false">http://www.bbqiguana.com/?p=126</guid>
		<description><![CDATA[While several features of Microsoft's DOMDocument object are not supported by standards, it's hard to deny that many of them are quite useful, and probably should be standardized.  When writing AJAX web apps, you need easy access to XML nodes.  And more than anything, you need it to be cross-browser capable.  To that end, I often include the following script in my AJAX apps.]]></description>
			<content:encoded><![CDATA[<p>While several features of Microsoft&#8217;s DOMDocument object are not supported by standards, it&#8217;s hard to deny that many of them are quite useful, and probably <em>should</em> be standardized.</p>
<p>When writing AJAX web apps, you need easy access to XML nodes.  And more than anything, you need it to be cross-browser capable.  To that end, I often include the <a href="/js/xml.js">following script</a> in my AJAX apps.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/**
 * XML functions
 */</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">ActiveXObject</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #009966; font-style: italic;">/* Functions for IE */</span>
	domLoadXml<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>xml<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> doc<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'MSXML2.DOMDocument'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		doc.<span style="color: #660066;">async</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		doc.<span style="color: #660066;">loadXML</span><span style="color: #009900;">&#40;</span>xml<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">return</span> doc<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: #009900;">&#123;</span>
	<span style="color: #009966; font-style: italic;">/* Functions for non-IE browsers */</span>
	domLoadXml<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>xml<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> parser<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> DOMParser<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">return</span> parser.<span style="color: #660066;">parseFromString</span><span style="color: #009900;">&#40;</span>xml<span style="color: #339933;">,</span><span style="color: #3366CC;">'text/xml'</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;">//fill in the missing convenience methods for Firefox</span>
	Element.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">selectSingleNode</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>xpath<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> xpe<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> XPathEvaluator<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> n<span style="color: #339933;">=</span>xpe.<span style="color: #660066;">evaluate</span><span style="color: #009900;">&#40;</span>xpath<span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>XPathResult.<span style="color: #660066;">FIRST_ORDERED_NODE_TYPE</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">null</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>n<span style="color: #339933;">!=</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> n.<span style="color: #660066;">singleNodeValue</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	Element.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">selectNodes</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>xpath<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> xpe<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> XPathEvaluator<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> xpr<span style="color: #339933;">=</span>xpe.<span style="color: #660066;">evaluate</span><span style="color: #009900;">&#40;</span>xpath<span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>XPathResult.<span style="color: #660066;">ORDERED_NODE_ITERATOR_TYPE</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> nodes<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>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>xpr<span style="color: #339933;">!=</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> el<span style="color: #339933;">=</span>xpr.<span style="color: #660066;">iterateNext</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">while</span><span style="color: #009900;">&#40;</span>el<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				nodes.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>el<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				el<span style="color: #339933;">=</span>xpr.<span style="color: #660066;">iterateNext</span><span style="color: #009900;">&#40;</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: #000066; font-weight: bold;">return</span> nodes<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> HTMLElement.<span style="color: #660066;">prototype</span>.__defineGetter__ <span style="color: #339933;">!=</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		Element.<span style="color: #660066;">prototype</span>.__defineGetter__<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'xml'</span><span style="color: #339933;">,</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: #000066; font-weight: bold;">return</span> XMLSerializer<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">serializeToString</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		Element.<span style="color: #660066;">prototype</span>.__defineGetter__<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text'</span><span style="color: #339933;">,</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: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">textContent</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		Element.<span style="color: #660066;">prototype</span>.__defineSetter__<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>s<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;">textContent</span><span style="color: #339933;">=</span>s<span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//Element.prototype.__defineSetter__('xml', function(s) {} );</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<div class="link-summarizer"><p><strong>Links in this post</strong><ul><li><a href='/js/xml.js'>/js/xml.js</a></li></ul></p></div>]]></content:encoded>
			<wfw:commentRss>http://www.bbqiguana.com/2009/09/javascript-xml-extensions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript String functions</title>
		<link>http://www.bbqiguana.com/2009/09/javascript-string-functions/</link>
		<comments>http://www.bbqiguana.com/2009/09/javascript-string-functions/#comments</comments>
		<pubDate>Sat, 19 Sep 2009 19:14:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.bbqiguana.com/?p=129</guid>
		<description><![CDATA[For any serious enterprise web apps, there are a handful of default Javascript functions I like to include in order to make my life easier in the long run. Today, I present some handy extensions to the String object.]]></description>
			<content:encoded><![CDATA[<p>For any serious enterprise web apps, there are a handful of default Javascript functions I like to include in order to make my life easier in the long run.</p>
<p>Today, I present some handy extensions to the String object.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">String.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">trim</span> <span style="color: #339933;">=</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: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/(^\s+)|(\s+$)/</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>
String.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">addTrailingSlash</span> <span style="color: #339933;">=</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: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'/'</span> <span style="color: #339933;">!=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'/'</span> <span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
String.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">left</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>n<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>n <span style="color: #339933;">&lt;=</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</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>n <span style="color: #339933;">&gt;</span> String<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">return</span> String<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>n<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
String.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">right</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>n<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>n <span style="color: #339933;">&lt;=</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</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>n <span style="color: #339933;">&gt;</span> String<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> str<span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
       <span style="color: #003366; font-weight: bold;">var</span> iLen <span style="color: #339933;">=</span> String<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
       <span style="color: #000066; font-weight: bold;">return</span> String<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span>iLen<span style="color: #339933;">,</span> iLen <span style="color: #339933;">-</span> n<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>The .trim() method is generally quite useful everywhere where text input is accepted.</p>
<p>The .addTrailingSlash() method is a nice way to help guarantee that you get valid paths and URLs when variables are involved.</p>
<p>The other two methods &mdash; .left() and .right() &mdash; are merely a conveniece at times, and I actually don&#8217;t find myself using them much as I prefer proper use of the .substring() method.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bbqiguana.com/2009/09/javascript-string-functions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Elegant date validation in Javascript</title>
		<link>http://www.bbqiguana.com/2008/01/elegant-date-validation-in-javascript/</link>
		<comments>http://www.bbqiguana.com/2008/01/elegant-date-validation-in-javascript/#comments</comments>
		<pubDate>Wed, 09 Jan 2008 22:50:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.bbqiguana.com/?p=202</guid>
		<description><![CDATA[Why is date validation such a difficult concept for Javascript programmers?  People are always trying way too hard to accomplish simple tasks.  Let's look at some of the wrong ways to do it.]]></description>
			<content:encoded><![CDATA[<p>Why is date validation such a difficult concept for Javascript programmers?  People are always trying way too hard to accomplish simple tasks.  Let&#8217;s look at some of the wrong ways to do it.</p>
<p>This is from the <a href="http://www.smartwebby.com/DHTML/date_validation.asp" title="Javascript Date Validation, at SmartWebby">top result on Google</a> for “<a href="http://www.google.com/search?q=javascript%20valid%20date%20function" title="Google search for javascript date validation">javascript valid date function</a>”:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// Declaring valid date character, minimum year and maximum year</span>
<span style="color: #003366; font-weight: bold;">var</span> dtCh <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;/&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> minYear <span style="color: #339933;">=</span> <span style="color: #CC0000;">1900</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> maxYear <span style="color: #339933;">=</span> <span style="color: #CC0000;">2100</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> isInteger<span style="color: #009900;">&#40;</span>s<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> s.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">// Check that current character is number.</span>
		<span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> s.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span>i<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><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&lt;</span> <span style="color: #3366CC;">&quot;0&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&gt;</span> <span style="color: #3366CC;">&quot;9&quot;</span><span style="color: #009900;">&#41;</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: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #006600; font-style: italic;">// All characters are numbers.</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> stripCharsInBag <span style="color: #009900;">&#40;</span>s<span style="color: #339933;">,</span> bag<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> returnString <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">// Search through string's characters one by one.</span>
	<span style="color: #006600; font-style: italic;">// If character is not in bag, append to returnString.</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> s.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> s.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span>i<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>bag.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>c<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> returnString <span style="color: #339933;">+=</span> c<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">return</span> returnString<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> daysInFebruary <span style="color: #009900;">&#40;</span>year<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">// February has 29 days in any year evenly divisible by four,</span>
	<span style="color: #006600; font-style: italic;">// EXCEPT for centurial years which are not also divisible by 400.</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>year <span style="color: #339933;">%</span> <span style="color: #CC0000;">4</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span>year <span style="color: #339933;">%</span> <span style="color: #CC0000;">100</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span>year <span style="color: #339933;">%</span> <span style="color: #CC0000;">400</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">29</span> <span style="color: #339933;">:</span> <span style="color: #CC0000;">28</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> DaysArray<span style="color: #009900;">&#40;</span>n<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> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;=</span> n<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">31</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>i<span style="color: #339933;">==</span><span style="color: #CC0000;">4</span> <span style="color: #339933;">||</span> i<span style="color: #339933;">==</span><span style="color: #CC0000;">6</span> <span style="color: #339933;">||</span> i<span style="color: #339933;">==</span><span style="color: #CC0000;">9</span> <span style="color: #339933;">||</span> i<span style="color: #339933;">==</span><span style="color: #CC0000;">11</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">30</span><span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>i<span style="color: #339933;">==</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">29</span><span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> isDate<span style="color: #009900;">&#40;</span>dtStr<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> daysInMonth <span style="color: #339933;">=</span> DaysArray<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">12</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> pos1 <span style="color: #339933;">=</span> dtStr.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>dtCh<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> pos2 <span style="color: #339933;">=</span> dtStr.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>dtCh<span style="color: #339933;">,</span> pos1 <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> strMonth <span style="color: #339933;">=</span> dtStr.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> pos1<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> strDay <span style="color: #339933;">=</span> dtStr.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span>pos1 <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> pos2<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> strYear <span style="color: #339933;">=</span> dtStr.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span>pos2 <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	strYr <span style="color: #339933;">=</span> strYear<span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>strDay.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;0&quot;</span> <span style="color: #339933;">&amp;&amp;</span> strDay.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> strDay <span style="color: #339933;">=</span> strDay.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</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>strMonth.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;0&quot;</span> <span style="color: #339933;">&amp;&amp;</span> strMonth.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> strMonth <span style="color: #339933;">=</span> strMonth.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</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> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;=</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</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>strYr.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;0&quot;</span> <span style="color: #339933;">&amp;&amp;</span> strYr.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> strYr <span style="color: #339933;">=</span> strYr.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	month <span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>strMonth<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	day <span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>strDay<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	year <span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>strYr<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>pos1 <span style="color: #339933;">==</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span> <span style="color: #339933;">||</span> pos2 <span style="color: #339933;">==</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><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;The date format should be : mm/dd/yyyy&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</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: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>strMonth.<span style="color: #660066;">length</span> <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">||</span> month <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">||</span> month <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">12</span><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;Please enter a valid month&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</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: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>strDay.<span style="color: #660066;">length</span> <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">||</span> day <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">||</span> day <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">31</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span>month <span style="color: #339933;">==</span> <span style="color: #CC0000;">2</span> <span style="color: #339933;">&amp;&amp;</span> day <span style="color: #339933;">&gt;</span> daysInFebruary<span style="color: #009900;">&#40;</span>year<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> day <span style="color: #339933;">&gt;</span> daysInMonth<span style="color: #009900;">&#91;</span>month<span style="color: #009900;">&#93;</span><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;Please enter a valid day&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</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: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>strYear.<span style="color: #660066;">length</span> <span style="color: #339933;">!=</span> <span style="color: #CC0000;">4</span> <span style="color: #339933;">||</span> year <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">||</span> year <span style="color: #339933;">&lt;</span> minYear <span style="color: #339933;">||</span> year <span style="color: #339933;">&gt;</span> maxYear<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;Please enter a valid 4 digit year between &quot;</span> <span style="color: #339933;">+</span> minYear <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot; and &quot;</span> <span style="color: #339933;">+</span> maxYear<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</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: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>dtStr.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>dtCh<span style="color: #339933;">,</span> pos2 <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!=</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span> <span style="color: #339933;">||</span> isInteger<span style="color: #009900;">&#40;</span>stripCharsInBag<span style="color: #009900;">&#40;</span>dtStr<span style="color: #339933;">,</span> dtCh<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">false</span><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;Please enter a valid date&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</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: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Holy cow! That&#8217;s a large amount of code to include into a project, just for date validation.  And worse, if you click through the links on the Google search, you&#8217;ll find countless examples of huge, over-complicated validation functions, occasionally mixed with smaller functions that are simpler, but inaccurate.  Why is this so hard?</p>
<p>Let&#8217;s look at another one.  This is actual code that was used by one of the companies I&#8217;ve worked for:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> validateDate<span style="color: #009900;">&#40;</span>dateValue<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> RegExPattern <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/^(?=\d)(?:(?:(?:(?:(?:0?[13578]|1[02])(\/|-|\.)31)\1|(?:(?:0?[1,3-9]|1[0-2])(\/|-|\.)(?:29|30)\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})|(?:0?2(\/|-|\.)29\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))|(?:(?:0?[1-9])|(?:1[0-2]))(\/|-|\.)(?:0?[1-9]|1\d|2[0-8])\4(?:(?:1[6-9]|[2-9]\d)?\d{2}))($|\ (?=\d)))?(((0?[1-9]|1[012])(:[0-5]\d){0,2}(\ [AP]M))|([01]\d|2[0-3])(:[0-5]\d){1,2})?$/</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>dateValue.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span>RegExPattern<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> dateValue.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;=</span> <span style="color: #CC0000;">8</span> <span style="color: #339933;">&amp;&amp;</span> dateValue.<span style="color: #660066;">length</span> <span style="color: #339933;">&lt;=</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</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: #009900;">&#125;</span></pre></td></tr></table></div>

<p>This regular expression seems to accurately validate dates, even for leap year, but it&#8217;s absolutely unmanageable.  If any aspect of this validation is ever found to be lacking in some way, I pity the person who will have to fix it.</p>
<p>Why don&#8217;t people just use Javascript&#8217;s built-in <code>Date</code> object to validate their dates? JavaScript&#8217;s Date object is built to do some rather neat stuff. If you set the month or day to a value that is out of range, the <code>Date</code> object subtracts the difference and updates the entire date. For instance, if you set the month to April (which has 30 days), and then set the date to the 31st, the Date object will automatically change the month to May and the date to the 1st.</p>
<p>Thus, validating a date is rather easy. Here&#8217;s what I do:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> validDate<span style="color: #009900;">&#40;</span>date<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//split the date using ANY separator</span>
	<span style="color: #003366; font-weight: bold;">var</span> re <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/(\d+)\D+(\d+)\D+(\d+)/</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> date.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span>re<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>a<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//check the year format</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">==</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span> a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">69</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">'19'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'20'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</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>a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//use integers and avoid octal parse errors for numbers starting with '0'</span>
		a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//use the Javascript Date object to validate the date</span>
		<span style="color: #003366; font-weight: bold;">var</span> dt <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>
		dt.<span style="color: #660066;">setFullYear</span><span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		dt.<span style="color: #660066;">setMonth</span><span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		dt.<span style="color: #660066;">setDate</span><span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</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><span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">==</span>dt.<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: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">==</span>dt.<span style="color: #660066;">getDate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">==</span>dt.<span style="color: #660066;">getFullYear</span><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;">&#40;</span>String<span style="color: #009900;">&#40;</span>a<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: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">?</span> a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'0'</span> <span style="color: #339933;">+</span> a<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> <span style="color: #3366CC;">'/'</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>String<span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">?</span> a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'0'</span> <span style="color: #339933;">+</span> a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'/'</span> <span style="color: #339933;">+</span> a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>There are a number of advantages to doing it this way. The first advantage is flexibility of formatting. This function accepts dates with ANY delimiter — you don&#8217;t have to check independently for dots, dashes, slashes, etc.  It also gracefully handles 1-digit or 2-digit numbers for month and day, and 2-digit or 4-digit years.</p>
<p>The second advantage is that the hard work is done by JavaScript&#8217;s <code>Date</code> object, which is compiled and fast. All we&#8217;re doing here is setting the year, month, and day, and then checking to make sure it stayed where we set it. If it did, all the values were in their acceptable ranges.</p>
<p>And the third advantage to this function is that it returns a consistently formatted date for use throughout your code, or <code>null</code> if the input value is invalid.</p>
<p>So, if you want to validate <em>and format</em> a date in a text field, you can just add one line to the <code>onblur</code> handler:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;input type=&quot;text&quot; name=&quot;datefield&quot; value=&quot;&quot; onblur=&quot;if (!(this.value=validDate(this.value))) alert('Please enter a valid date.');&quot; /&gt;</pre></td></tr></table></div>

<p>Of course, I recommend using a more elegant event handler to do the validation, but if you&#8217;re lazy, it really is that simple.</p>
<p>So there you have it, a much better way to validate dates.  Please note that this function assumes the date is in <code>m/d/y</code> format. Naturally, I have a way of handling different formats, as well, but I chose not to address that here since the functions I found for comparison don&#8217;t bother to address it.</p>
<div class="link-summarizer"><p><strong>Links in this post</strong><ul><li><a href='http://www.smartwebby.com/DHTML/date_validation.asp' title="Javascript Date Validation, at SmartWebby">Javascript Date Validation, at SmartWebby</a></li><li><a href='http://www.google.com/search?q=javascript%20valid%20date%20function' title="Google search for javascript date validation">Google search for javascript date validation</a></li></ul></p></div>]]></content:encoded>
			<wfw:commentRss>http://www.bbqiguana.com/2008/01/elegant-date-validation-in-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
