Simple JavaScript question - where does this go

I'm trying to follow the tutorial to use j开发者_如何学运维Query UI plugin. I'm new to JavaScript and I'm not sure where to put a particular bit of code.

I've got everything I need downloaded. I've put the files where they need to be and included them in the like I'm supposed to - all no problems there. But next I get a little stuck due to my utter noobieness.

It says I give an ID to the element I want to use e.g. id="date" and call:

$('#date').datepicker();

on it.

Where do I put the above code? Along with the html and php? Or in the Javascript file I've included?

First load your jQuery library:

<script src="/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>

Then load your jQuery UI library:

<script src="/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

Then, load your code with something like:

<script type="text/javascript">
$(document).ready(function() {
    $('#date').datepicker();
});
</script>

Put it within a script tag like :

<script type="text/javascript">
  $(function(){
   $('#date').datepicker();
  })
</script>

You will usually execute jQuery-code on $(document).ready(), but there are cases where you don't. Maybe this gets you started: http://docs.jquery.com/How_jQuery_Works

In your HTML/PHP code between script tags. Mostly in the head section or at the bottom just infront of the end body tag.

your code would look like this: ...

<script type="text/javascript">
    $(document).ready(function() {
      $('#date').datepicker();
    });
</script>

the code you are trying to use is Javascript, so it normally goes into a .js file, or into a script type="javascript" tag of your resulting html. As it uses the jQuery $ function, you need to have the jQuery Library included before calling the code you have in your question. The code itself is best placed into the document.ready function that jQuery provides, so it will be called only when all the neccessary libraries are loaded and the html Dom tree has been constructed.

$(document).ready(function() {
  $('#date').datepicker();
});

You have to put that code inside the javascript file such that the input text box element is already append to DOM.For example,

var input = document.createElement('input');
input.type = 'text';
input.id  = 'date';   
document.body.appendChild(input);(or)[If div to append then div.appendChild(input);

$('#date').datepicker();

Here,the input element is appended to body or the parent div.Then the datepicker() can be rendered