And we were told endless times that the best practice is to load scripts at the end of web page. It’s true.

We also have document.ready events thanks to numerous javascript frameworks that gives us opportunity to perform most of our JS actions when document is ready to be manipulated. But there are cases when you do need JS blocking features.

Many ad serving systems work using document.write (One I’m have very good knowledge of is RealMedia), sometimes you need to load different versions of your scripts or your content rendering depends on some script and you have to be sure nothing is loaded untill your script is ready or may be you have script that depends on some script and you are not sure that this framework is loaded. Here comes document.write to your assistance.

I’m sure many people will say that I can load scripts using appendElement and then load depending scripts on it’s load event. This is also true, may be in my next post I will talk about this kind of script loading. But now lets see some samples.

Example #1

	<div style="border: 1px solid blue;width:200px;padding:10px;">
		Static element content
		<script type="text/javascript">
			document.write("<script type=\"text\/javascript\"
                                 src=\"writeContent.js\"><\/script>");
		</script>
	</div>

Content of the writeContent.js file:

document.write("<div style=\"border:1px solid red;width:200px;\">
     Dynamic element content<\/div>")

The result is pretty obvious:

In our next example we have some JS in in writeVariable.js file and we want to load and use it:

<div>
	<script type="text/javascript">
		document.write("<script type=\"text\/javascript\"
                      src=\"writeVariable.js\"><\/script>");
		alert(myVar);
	</script>
</div>

Content of the writeContent.js file:

    var myVar = "Some value";

You would expect to see alert “Some value” but actually you will get “myVar is undefined” error. Why? Look at the HTML structure created and understand why:

Script block that you wrote created right after script block that was executed, so obviously at the time you tried to alert myVar it didn’t exist in the document.

The correct way to write it would be:

	<div>
		<script type="text/javascript">
                      document.write("<script type=\"text/javascript\"
                           src=\"writeVariable.js\"><\/script>");
		</script>
		<script type="text/javascript">
                       alert(myVar);
		</script>
	</div>

You need to split your script into two blocks one writing the script and then second one using its data.

        if (a-b) alert("it's true!");

And another one

What will be printed as result of running this script:

	for (var n=10; n; n-- )
	{
		document.write (n + ",");
	}

The answer for both questions relies on the same principle of what JavaScript engine will evaluate as true and what as false.

    <script type="text/javascript">
        function doSomething(obj) {
            obj.style.color = '#cc0000';
        }
    </script>
    <a href="javascript:doSomething(this)">Link</a>

this keyword in his case was not A object as expected but window.
Having javascript:  in href attribute is like running JavaScript from address bar of your browser. It will run in window context.
Only if my friend was writing his code like this:

   ...
    <a onclick="doSomething(this)">Link</a>

it would work like charm.

But I never use javascript: at all in my markup. Why?
1. If you need text element that is clickable use span, any visual styling like text-decoration or cursor can be achieved using CSS.
2. If you don’t have actual link behind you shouldn’t use A tag. As far as I know it’s not good for SEO.
3. Javascript problems as i described above can arise
I would write the code above like this:

    ...
    <span style="text-decoration:underline;cursor:pointer;"
                 onclick="doSomething(this)">Link</span>

The only reason I know to use A for JavaScript triggers is to achieve hover effect without use of JavaScript.
If you know another reason why you should/shouldn’t use links as JavaScript triggers you’re welcome to comment.
After this post you can get an impression that I don’t like javascript: notation and you will be wrong,  actually there are very usefull tricks I use all the time:
1. Check some JS value on your page. Type javascript:alert(yourvariable) in the address bar and press enter.

You will get :

2. Or let’s say you have function somewhere on the page and you have to see it quick without searching through all your scripts. Or you wan’t to steal see how someone implemented something
Just type  javascript:alert(yourdesiredfunction) and voila:

UPD:
Just googled good page with JS best practices, it has Javascript: pseudoprotocol part that says almost exactly the same as my conclusions.
http://www.javascripttoolbox.com/bestpractices/

<script type="text/javascript">
		function testThis(){
		  //who is "this"
		}
</script>

And now to the real example.

Let’s say you build a simple Javascript object:

<script type="text/javascript">
		var mathObj = {
			pi: 3.14,
			getCircumference : function(data) {
				alert(this.pi * 2 * data.radius);
			}
		}

		mathObj.getCircumference(10);
</script>

You have properties, you have functions, you can use this keyword to access properties of the object from its functions. Everyone is happy.
Now we want to add function that will get some server data using AJAX and run one of the functions our object has.
(To all who wondered what is $ stands for – I use JQuery framework in all my JS samples)

<script type="text/javascript">
		var mathObj = {
			pi: 3.14,
			getCircumference : function(data) {
				alert(this.pi * 2 * data.radius);
			},
			getRemoteCircumference: function(url) {
				$.getJSON(url, this.getCircumference);
			}
		}

		mathObj.getRemoteCircumference("RadiusData.js");
</script>

If we have {“radius”:5} in RadiusData.js file you would expect the result of getCircumference would be 31.4 but you will get NaN. Why is that? Because this keyword in this case will refer to some kind of object with request data returned by JQuery. What can you do?
Solution number one is to use your object name:

...
	getCircumference : function(data) {
		alert(mathObj.pi * 2 * data.radius);
	}
...

Ugly. You don’t have to return on object name in every function.
Solution number two is to use anonymous function and explicitly call your function:

....
	getRemoteCircumference: function(url) {
		$.getJSON(url, function(data){
			mathObj.getCircumference(data);
		});
	}
...

Good enough solution, but again I don’t like reusing object name…
And now to my favorite solution.

<script type="text/javascript">
   function getContextFunc(context, func) {
       return function() {
           func.apply(context, arguments);
       };
   }

   var mathObj = {
       pi: 3.14,
       getCircumference: function(data) {
           alert(this.pi * 2 * data.radius);
       },
       getRemoteCircumference: function(url) {
          $.getJSON(url, getContextFunc(this, this.getCircumference));
       }
   }

   mathObj.getRemoteCircumference("RadiusData.js");
</script>

Here apply function will come in handy. getContextFunc returns anonymous function that will run our original method in given context.
See some documentation