Bootstrap2 experiment 2

Ken Webb 2011-03-23T19:23:25Z

Work through the following steps. For the first two steps, copy the highlighted text, and paste it into the address bar of the Bootstrap 2 page. This experiment builds on the results of Bootstrap2 experiment 1.

(1) Add a short script to the page that knows how to evaluate JavaScript code.

javascript:(function(type,content){var script=document.createElement('script');script.setAttribute('type',type);var textNode = document.createTextNode(content);script.appendChild(textNode);document.getElementsByTagName('head')[0].appendChild(script);})("text/javascript","function btstrp_do(myText){eval(myText);}");

(2) Add a simple JavaScript editor to the page.

javascript:(function(){$('body').append("<div id='btstrp_tool'><input id='btstrp_do' type='button' name='do' value='&#xBB;' onclick=\"btstrp_do(document.getElementById('btstrp_console').value);\"/><textarea id='btstrp_console' rows='25' cols='100' spellcheck='false'></textarea></div>");})();

(3) Test the new editor by typing in some valid JavaScript, and pressing the button. Try these examples to get started.

var a = 11;
var b = 22;
var c = a + b;
alert(c);

$('textarea').css('background-color','aliceblue');

Try a page where steps 1 and 2 have already been done.

Return to the Bootstrap 2 wiki page.

Alternative Approaches

Various other in-browser editors are available.

If you are using Firefox, you can install Firebug, a "popular and powerful web development tool".

Firebug lite is "compatible with all major browsers".

Both versions of Firebug are much more than just an editor. They include a console where you can type and execute JavaScript, and analize the results.

Ace is "a standalone code editor written in JavaScript". As of March 2011 it's in an early stage of development.

Other browsers usually come with their own development tools.

return to main page