If you know word "Bookmarklet" this info can be useful.
Wikipedia say that Bookmarklet is a small computer application, stored as the URL of a bookmark. "Hello world" program can looks like

javascript:alert('Hello world')

Program has to have only one line of code. It can be reason of using such words as "small" or "tiny". However it's not the reason. Bookmarklet can be huge. All you need is ability for running any js-file with one line of code. All modern browsers have this functionality.

javascript:document.body.appendChild(document.createElement('script')).src='http://server/script.js';void(1);

As you see, we just add SCRIPT element with appropriated SRC attribute. After running of this bookmarklet http://server/script.js will be run. "script.js" can be as huge as you want.

How about having simple way for running javascripts on any web-page?
I have solution. All you need is to drag link below on your links toolbar.
Or just add this link to your favorites.

JSconsole

Of couse, you can try it before :). Just click on the link.
Dislike it? Just press the link again and all will disappear.
As usual I provide source code:

[link]

javascript:var%20sc%20=%20document.createElement(%22SCRIPT%22);sc.src=%22http://blogs.sun.com/ahot/resource/bin/javascriptconsole.js%22;document.body.appendChild(sc);void(1);

[javascriptconsole.js]

//mouse down on dragged DIV element
function startdrag(t, e) {
	if (e.preventDefault) e.preventDefault(); //line for IE compatibility
	e.cancelBubble = true;
	window.document.onmousemoveOld = window.document.onmousemove;
	window.document.onmouseupOld = window.document.onmouseup;
	window.document.onmousemove=dodrag;
	window.document.onmouseup=stopdrag;
	window.document.draged = t;
	t.dragX = e.clientX;
	t.dragY = e.clientY;
	return false;
}
//move the DIV
function dodrag(e) {
	
	if (!e) e = event; //line for IE compatibility
	t = window.document.draged;
	t.style.left = (t.offsetLeft + e.clientX - t.dragX)+"px";
	t.style.top = (t.offsetTop + e.clientY - t.dragY)+"px";

	t.dragX = e.clientX;
	t.dragY = e.clientY;
	return false;
}
//restore event-handlers
function stopdrag() {
   window.document.onmousemove=window.document.onmousemoveOld;
   window.document.onmouseup=window.document.onmouseupOld;
}
function WRITE(s) {
	document.getElementById('ScriptOutArea').innerHTML+= s.toString().replace("\n", "<BR>");
}
function runScipt() {
	new Function("{\n"+document.getElementById('ScriptArea').value+"\n}")();
	document.getElementById('ScriptOutArea').scrollTop = document.getElementById('ScriptOutArea').scrollHeight;
}
function clearOut() {
	document.getElementById('ScriptOutArea').innerHTML = "";
}
function onerrorscript(err) {
	document.getElementById('ScriptOutArea').innerHTML += "<FONT color=red>"+err.replace("\n", "<BR>")+"</FONT><BR>";
	document.getElementById('ScriptOutArea').scrollTop = document.getElementById('ScriptOutArea').scrollHeight;
}

function initJavaScriptConsole() {
	if (document.getElementById('javascriptconsolediv') != null) {
		document.body.removeChild(document.getElementById('javascriptconsolediv'));
		return;
	}
	s = "";
	s+="<TABLE cellpadding=1 cellspacing=0 width=400>";
	s+="<TR><TD><DIV style='background:#bbccdd;color:black;border:1px solid black;font:11px courier new' onmousedown=startdrag(getElementById('javascriptconsolediv'),event)>javascript console, Anton Teryaev, 2008</DIV></TD></TR>";
	s+="<TR><TD><DIV style='border:1px solid black;padding:0px'><TEXTAREA style='padding:0px;width:100%;height:200px;border:0px solid black' id=ScriptArea>";
	s+="i = document.getElementsByTagName('BR');\n";
	s+="WRITE('There are '+i.length+' BR elements here\\n');";
	s+="</TEXTAREA></DIV></TD></TR>";
	s+="<TR><TD><INPUT TYPE=BUTTON VALUE='run script' onclick=runScipt() style='width:100px;background:#eeeeee;color:black;border:1px solid black;font:11px courier new'> <INPUT TYPE=BUTTON VALUE='clear output' onclick=clearOut() style='width:100px;background:#eeeeee;color:black;border:1px solid black;font:11px courier new'></TD></TR>";
	s+="<TR><TD><DIV style='background:#eeeeee;overflow:auto;height:100px;color:gray;border:1px solid black;font:11px courier new' id='ScriptOutArea'>";
	s+="<i>Output area, use WRITE(string) function.</i><BR>";
	s+="</DIV></TD></TR>";
	s+="</TABLE>";

	var sd = document.createElement("DIV");
	sd.style.position="absolute";
	sd.style.background="white";
	sd.style.border="1px solid black";
	sd.style.font="11px courier new";
	sd.style.top = (document.documentElement.scrollTop+document.documentElement.clientHeight/2-180)+"px";
	sd.style.left = (document.documentElement.scrollLeft+document.documentElement.clientWidth/2-200)+"px";
	sd.id = "javascriptconsolediv";
	sd.innerHTML=s;

	document.body.appendChild(sd);

	window.onerror = onerrorscript;
	window.onscroll = onwinscroll;
}
function onwinscroll() {
	md = document.getElementById('javascriptconsolediv');
	if (md.offsetTop > document.documentElement.scrollTop+document.documentElement.clientHeight-350) md.style.top = (document.documentElement.scrollTop+document.documentElement.clientHeight-350) + "px";
	if (md.offsetTop < document.documentElement.scrollTop) md.style.top = document.documentElement.scrollTop + "px";
	if (md.offsetLeft < document.documentElement.scrollLeft) md.style.left = document.documentElement.scrollLeft + "px";
}
initJavaScriptConsole();

Realy useful thing. No hints - no money. :)



Source code:

<A href="javascript:void(0);"  onmouseover="showhint(this, '$100 000 000')">money</A>

<STYLE>
	.hintstyle {
		position:absolute;
		background:#EEEEEE;
		border:1px solid black;
		padding:2px;
	}
</STYLE>

<SCRIPT>
var hintcontainer = null;
function showhint(obj, txt) {
   if (hintcontainer==null) {
	  hintcontainer = document.createElement("div");
	  hintcontainer.className="hintstyle";
	  document.body.appendChild(hintcontainer);
   }
   obj.onmouseout = hidehint;
   obj.onmousemove=movehint;
   hintcontainer.innerHTML=txt;
}
function movehint(e) {
	if (!e) e = event; //line for IE compatibility
	hintcontainer.style.top =  (e.clientY+document.documentElement.scrollTop+2)+"px";
	hintcontainer.style.left = (e.clientX+document.documentElement.scrollLeft+10)+"px";
	hintcontainer.style.display="";
}
function hidehint() {
   hintcontainer.style.display="none";
}
</SCRIPT>

The box above can be dragged. It works in IE, Opera, FireFox.

You can read this entry in my new blog

Code:

<DIV 
	style="position:absolute;width:100px;height:100px;background:#EEEEEE;border:1px solid black"
	onmousedown="startdrag(this, event);"
>drag me</DIV>

<SCRIPT>
//mouse down on dragged DIV element
function startdrag(t, e) {
	if (e.preventDefault) e.preventDefault(); //line for IE compatibility
	e.cancelBubble = true;
	window.document.onmousemoveOld = window.document.onmousemove;
	window.document.onmouseupOld = window.document.onmouseup;
	window.document.onmousemove=dodrag;
	window.document.onmouseup=stopdrag;
	window.document.draged = t;
	t.dragX = e.clientX;
	t.dragY = e.clientY;
	return false;
}
//move the DIV
function dodrag(e) {
	
	if (!e) e = event; //line for IE compatibility
	t = window.document.draged;
	t.style.left = (t.offsetLeft + e.clientX - t.dragX)+"px";
	t.style.top = (t.offsetTop + e.clientY - t.dragY)+"px";
	t.dragX = e.clientX;
	t.dragY = e.clientY;
	return false;
}
//restore event-handlers
function stopdrag() {
   window.document.onmousemove=window.document.onmousemoveOld;
   window.document.onmouseup=window.document.onmouseupOld;
}
</SCRIPT>

Tell me if you have easer way to do it. Thanks.

One hour, just 100 line of code. "bubble breaker" game (like on PPC) is done.
Play here.
Source code is inside. [Read More]