<?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>Quinterox &#187; JavaScript</title>
	<atom:link href="http://www.quinterox.com/content/tag/javascript-code/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.quinterox.com/content</link>
	<description>Cesar Quinteros</description>
	<lastBuildDate>Sun, 20 Jun 2010 04:51:28 +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>JavaScript Submitted Form</title>
		<link>http://www.quinterox.com/content/code/javascript-submitted-form/</link>
		<comments>http://www.quinterox.com/content/code/javascript-submitted-form/#comments</comments>
		<pubDate>Fri, 24 Jul 2009 03:30:26 +0000</pubDate>
		<dc:creator>Cesar Quinteros</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[form]]></category>
		<category><![CDATA[submit]]></category>

		<guid isPermaLink="false">http://www.quinterox.com/content/?p=677</guid>
		<description><![CDATA[How to submit a form using JavaScript.]]></description>
			<content:encoded><![CDATA[<p>Simply this is the code for calling JavaScript to submit a form. One good use is in case you want your submit button to be an anchored image and not a regular form button. You can attach this function to the link/ image and let it do its thing. I am currently learning Ajax so I am using the script to submit my form but not redirect or refresh the page.</p>
<pre>
document.forms['myForm'].onsubmit = function() {
       // Your code
}
</pre>
<p>Or</p>
<pre>
document.forms[0].onsubmit = function() {
       // Your code
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.quinterox.com/content/code/javascript-submitted-form/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Adding expire tags to your CSS and JavaScript files</title>
		<link>http://www.quinterox.com/content/blog/expire-tags-adding-them-to-your-css-javascript/</link>
		<comments>http://www.quinterox.com/content/blog/expire-tags-adding-them-to-your-css-javascript/#comments</comments>
		<pubDate>Thu, 01 Jan 2009 08:02:33 +0000</pubDate>
		<dc:creator>Cesar Quinteros</dc:creator>
				<category><![CDATA[ASP.NET]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[set expire]]></category>

		<guid isPermaLink="false">http://www.quinterox.com/content/?p=451</guid>
		<description><![CDATA[Adding expiration headers to PHP/ASP files.]]></description>
			<content:encoded><![CDATA[<p>Though we live in an age where a lot of people have fast internet connections. The focus (at least for developers) has shifted to technologies that relieve the server of heavy workloads and increase processing speeds such as AJAX, using server-side and client-side caching, as well as gzipping. In this post I will lightly touch upon client-side caching of dynamically generated CSS and JavaScript files.</p>
<p>I recently installed YSlow, a handy web development tool for Firefox. In it there is an option that tells you whether your CSS or JavaScript files are cached on the client&#8217;s computer allowing for a quicker page load. I noticed my files were not cached so I looked a little into how to go about caching them so the browser won&#8217;t download the same file over and over when going from page to page. So I went about conducting my own tests to see how to make this happen. The only way of making it happen other than setting an expire date/time on the WHOLE page (or on the .htaccess file in Linux servers) was to create a server-side file that would output the expiration, content type headers as well as the actual styles/code in your web application. Below is a clearer picture of how I made it happen.</p>
<h3>PHP- Step 1.</h3>
<p>Make a dynamically generated CSS file that includes expiration and content headers (code below). Save it as &#8216;dynamic_css.php&#8217;. The actual CSS styling can be typed in the same way you would do in a regular stylesheet, we are only after getting those expiration and content type headers sent out.</p>
<pre>&lt;?php
header("Expires: Thu, 31 Dec 2020 20:00:00 GMT");
header('Content-type: text/css');
?&gt;
h1 { color: Red; }</pre>
<p><br class="clear" /></p>
<h3>PHP- Step 2.</h3>
<p>Add &#8216;dynamic_css.php&#8217; as the CSS href of you document. This should make YSlow happy and increase the speed at which the user navigates through pages that use the same CSS file. Use the same method to add expiration tags to JavaScript.</p>
<pre>&lt;link rel="stylesheet" type="text/css" <strong><span style="color: #ff0000;">href="dynamic_css.php"</span></strong>/&gt;</pre>
<p><br class="clear" /></p>
<h3>ASP- Step 1.</h3>
<p>The way I added expire tags to my CSS code in ASP is very similar to PHP&#8217;s. First you make a server-side CSS file and save it as &#8216;dynamic_css.aspx&#8217;. Since it is important the headers hit the server first we use server-side code  to send those out first. We type in the actual CSS code like we would in a regular CSS file after that. Besides would you really want to Response.Write() all of your CSS code? I think not.</p>
<pre>&lt;%
    Response.Expires = 3600
    Response.ContentType = "text/css"
%&gt;
    h1 { color: Blue; }</pre>
<p><br class="clear" /></p>
<h3>ASP- Step 2.</h3>
<p>Add &#8216;dynamic_css.aspx&#8217; as the CSS source of you document. This should make YSlow happy since the expiration headers are now being sent increasing the speed at which the user navigates through the pages that share the same CSS file. Use this same header method to add expiration tags to JavaScript files.</p>
<pre>&lt;link rel="stylesheet" type="text/css" <strong><span style="color: #ff0000;">href="dynamic_css.aspx"</span></strong>/&gt;</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.quinterox.com/content/blog/expire-tags-adding-them-to-your-css-javascript/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Load listeners</title>
		<link>http://www.quinterox.com/content/code/load-listeners/</link>
		<comments>http://www.quinterox.com/content/code/load-listeners/#comments</comments>
		<pubDate>Fri, 25 Jul 2008 01:55:01 +0000</pubDate>
		<dc:creator>Cesar Quinteros</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[eventlistener]]></category>

		<guid isPermaLink="false">http://quinterox.com/code/?p=15</guid>
		<description><![CDATA[A common problem arises in JavaScript when adding onLoad events to your page. It will not recognize an element until it is loaded onto the web page. This post teaches you how to get around that and add additional onLoad events to your page.]]></description>
			<content:encoded><![CDATA[<p>Sometimes multiple scripts tied to the page&#8217;s OnLoad even do not work. This is because the scripts are most likely trying to assign event handlers for the same event. The fix is to call the functions from a single load handler.</p>
<pre>window.onload = function()
{
   functionA();
   functionB();
}</pre>
<p>A better approach however would be to be able to dynamically assign functions to the page&#8217;s load event by merely passing the following function a function&#8217;s name.</p>
<pre>function addLoadListener(fn)
{
   if (typeof window.addEventListener != 'undefined')
   {window.addEventListener('load', fn, false);}

   else if (typeof document.addEventListener != 'undefined')
   {document.addEventListener('load', fn, false);}

   else if (typeof window.attachEvent != 'undefined')
   {window.attachEvent('onload', fn);}

   else
   {
        var oldfn = window.onload;

        if (typeof window.onload != 'function')
        {
            window.onload = fn;
        }
        else
        {
             window.onload = function()
             {
                  oldfn();
                  fn();
             };
         }
    }
}</pre>
<p>To add an event we would now use:</p>
<pre>addLoadListener(firstfunction);
addLoadListener(secondfunction);
addLoadListener(thirdfunction);</pre>
<p>So why so do we test for so many different types of functions? Ah you know, BROWSERS. We are actually testing that these types are supported so that we can add our onload functions.</p>
<p>The W3C standard method is called addEventListener:</p>
<pre>window.addEventListener('load', firstfunction, false);</pre>
<p>The IE method is called attachEvent:</p>
<pre>window.attachEvent('onload', firstfunction);</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.quinterox.com/content/code/load-listeners/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Attaching functions to events</title>
		<link>http://www.quinterox.com/content/code/attaching-functions-to-events/</link>
		<comments>http://www.quinterox.com/content/code/attaching-functions-to-events/#comments</comments>
		<pubDate>Fri, 25 Jul 2008 01:40:19 +0000</pubDate>
		<dc:creator>Cesar Quinteros</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[attaching function]]></category>

		<guid isPermaLink="false">http://quinterox.com/code/?p=14</guid>
		<description><![CDATA[The following post describes how to attach event handlers to html objects using the document object model separating code from content.]]></description>
			<content:encoded><![CDATA[<p>The following is a small list that describes how to attach event handlers to html objects using the document object model separating code from content.<br />
Onload</p>
<pre>window.onload = function()
{
:::script:::
}</pre>
<p>OnMouseOver</p>
<pre>var contentDiv = document.getElementById('content');
contentDiv.onmouseover = function()
{
:::script:::
}</pre>
<p>Similarly OnMouseOut</p>
<pre>contentDiv.onmouseout= function()
{
:::script:::
}</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.quinterox.com/content/code/attaching-functions-to-events/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The script tag</title>
		<link>http://www.quinterox.com/content/code/the-script-tag/</link>
		<comments>http://www.quinterox.com/content/code/the-script-tag/#comments</comments>
		<pubDate>Fri, 25 Jul 2008 00:09:13 +0000</pubDate>
		<dc:creator>Cesar Quinteros</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[script tag]]></category>

		<guid isPermaLink="false">http://quinterox.com/code/?p=12</guid>
		<description><![CDATA[Shows simply how to add JavaScript, or attach JavaScript files to your web page.]]></description>
			<content:encoded><![CDATA[<p>There are two ways of adding JavaScript to a web page.</p>
<p>The first one allows you to add scripts directly to your page.</p>
<pre>&lt;script type="text/javascript"&gt;
:::scripts:::
&lt;/script&gt;</pre>
<p>The other way is attaching a JavaScript file to your web page like so.</p>
<pre>&lt;script type="text/javascript" src="my-javascript-file.js"&gt;&lt;/script&gt;</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.quinterox.com/content/code/the-script-tag/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
