firebug & javascript

Get Ready...

1. Get Firefox: firefox link 2. Get Firebug: firebug download link


Get Set...

3. Look at Firebug documentation: documentation link 4. Watch "Introduction to Firebug" video: (other screencasts)
  (other screencasts)


GO!!!

5. Start Firebug (use icon or menu) & click on "Console" tab. js console documentation 6. Click on red triangle icon (lower right) to switch between single line mode & command editor textbox. 7a. Enter following code in the console commannd editor textbox and hit "run" to execute. (copy and paste into the console window) var x=0; for(var i=0; i<10; i++) { x++; if(x%2==0) console.log("Even: " + x); else console.log("Odd: " + x); } alert("Bye"); 7b. Now try this code (copy and paste into the console window): var response = window.prompt('Enter a number: '); var number = parseFloat(response); var sqr = number * number; var doub = number * 2; console.log(number + " " + sqr + " " + doub); // document.write(number + " " + sqr + " " + doub); Now, uncomment the "document.write" line above... 8. Study and understand code! 9. Experiment with console: (log, debug, info, warn, error, assert, dir, profile) 10. Experiment with javascript: different types (number, string, bool, undefined, null) (object, array, function) conversions between types loops branching functions



div: class is 'simple': border:black solid 1px; padding:10px; margin:10px; background-color:#ffc; color:#00f; code that will be executed on click: function DoIt() { var x = prompt("enter a number"); x = x*3; document.write("The number is " + x + "<hr />"); document.close(); }
div: id is 'b' class is 'simple': border:black solid 1px; padding:10px; margin:10px; background-color:#ffc; color:#00f; code that will be executed on click: function Trip() { var x = prompt("enter a number"); x = x*3; var o = document.getElementById("b"); o.innerHTML += "The number is " + x + "<hr />"; o.style.backgroundColor = "#f00"; o.style.color = "rgb(255,255,200)"; o.style.fontSize = "1.5em"; }