Newbie Questions

I just bought the book and have a couple questions about the Fund Raiser meter code. First off, I do not see a closing tag and second I don’t see how the JavaScript function gets invoked. Don’t you have to associate the fn named function() with the id of the meter?

Scott

You’re correct that the markup is missing a closing tag. That’s a mistake I’ll make sure to get cleaned up before we go to print!

Second, we’re using jQuery’s shorthand for document.ready.

$(function(){
  ...
});

Anything within that code block gets run automatically when the elements on the page have loaded.

So, we do

var meter = $("#pledge_goal");

to grab the meter element and then start applying the styles using jQuery. The next beta is going to have a very short jQuery primer to hopefully clear up some of these issues.

Thanks for reading, and for finding the code mistake. I’ll see if I can make this a little clearer too.

Thanks brother! So, if you have js functions defined in the head they are automatically invoked once the page loads? This seems a bit strange.

Scott

Not quite. Any JavaScript you have in the head gets run immediately. jQuery introduces a special event called document.ready that gets triggered when the page is loaded but not yet rendered. The

$(function(){
  // your code here;
});

is a shortcut for that event. The longhand version of that would be

$(document).ready(function(){
   // your code here;
});

Any code you put inside of that function gets executed when the document is ready. It’s a handy way to attach events to things on the page. JavaScript can only interact with elements it can “see”, meaning things that are alredy on the page. So you have two choices:

1. Load all your scripts right before the closing tag so everything else is in scope. This has the drawback of letting your users see the page for a second before your JS kicks in.

2. Using this method, which lets you keep your stuff in separate files, modular, and unobtrusive.

Thanks Brian—

So declaring js functions in the HEAD will result in them being implicitly invoked? I understand your timing remarks, however, it seems peculiar that simply declaring them would result in their being invoked. So if I include a scripts.js in the HEAD

do each of the functions therein get invoked? I guess I have never really thought about that aspect.

Peace,
Scott

script src=”/javascripts/prototype.js?1276851071” type=”text/javascript”

This was gobbled up by the forum renderer

I should also mention that you are very crisp at explaining complex matters!

Nope. Functions do not get invoked. You still have to do that. but if you put something outside of a function, it would get run right away.Try this:

In an html file, in the header, include “foo.js”.

THen, in foo.js, put this:

function willNotBeCalled(){
  alert("You won't see this");
}
alert("but you will see this");

You’d have to explicitly call the willNotBeCalled() method to trigger it, but the call to alert() will happen automatically. Using the jQuery document.ready stuff defers the running until the rest of the page is loaded.