Manipulating the DOM with Firebug

Currently I"m working more and more with jQuery and JavaScript to get behavior into my pages. This was quite painful in the beginning as I was depended a bit too much on alert"('this happens!').

But I guess this is where you get started and then find out about the excellent firebug. With the console you can then fire your JavaScript and jQuery commands to the page like so:

I'm querying on of Holland's main news sites for their logo. Firebug conveniently comes up with the link to the element and when clicked it will show where it's located on the page.

This is all nice but let's change the boring logo of nu.nl to that of our own!

Easy enough, just use the following to change the picture in the page:

But changing the elements in a page is just the beginning. You can just as easily add new functionality by binding a click event handler to one or more elements in the page.

Viewing registered events

You can also use the console to inspect what events are registered to an element on the page. All you need to do is use this syntax:

When we try that on the last input (randomly chosen) you get an overview of all the events bound (in this case only one).

If you the click on the object and hover over "function" you'll end up with the code itself:

This is a very neat trick that I wish I had stumbled upon earlier. Hope it helps.

Nothing much to, just that it took me some time to figure it out today. The code below tests whether DivisionID is actually set in the presenter.

          public class 
          Presenter { readonly IRepository repository; public Presenter(IRepository repository)
{ this.repository = repository; } public IView View
{ get; set; } public
void GetDivision() { View.DivisionID = repository.GetDivisionID(); } } public
interface IView { int DivisionID
{ get; set; }
} [TestFixture] public
class PresenterTests { Presenter sut; IView view; IRepository repository;
[SetUp] public
void SetUp() { view = MockRepository.GenerateMock<IView>();
repository = MockRepository.GenerateMock<IRepository>();
sut = new Presenter(repository){View
= view}; } [Test] public
void when_on_the_sut_GetDivisionID_is_called_it_should_set_the_divisionID_on_the_view()
{ //AAA mocking style //Arrange const
int divisionID = 1; repository.Stub(s => s.GetDivisionID()).Return(divisionID); //note:
the expectation is set when DivisionID is set to divisionID view.Expect(s =>
s.DivisionID = divisionID); //Act sut.GetDivision(); //Assert view.VerifyAllExpectations();
} }