javascript asp.net visual-web-developer-2010

how do i add a script to an aspx form in visual web developer

I've searched the net and watched videos on this but no one really helps. What I want to do is add an already typed java script file to my aspx form in Visual web developer. All tell me that i should just add:

<html>
<head> 
<title><title>
<script src="JScript.js" type="text/javascript"></script>
</head>
</html>

but.... in an aspx form theres no <head> or <body> tags only:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server" /> 
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server" >
</asp:Content>

If even possible to add java script to this aspx form please give me the code or help me do this right.

I have a picture and i want a button to change the picture to the next one in the gallery on my web page

Edit 1

Here is the html code to the buttons and picture

<tr>
    <td> <asp:Button ID="Button1" runat="server" Text="Prev" OnClientClick="init();"/> </td>
    <td> <img ID="pic" alt="" src="010.JPG" runat="server" width="200" height="200" /> </td>
    <td> <asp:Button ID="Button2" runat="server" Text="Next" OnClientClick="init();"/> </td>
</tr>

And here is the code to the javascript init()

var imagePath = new Array();
var imageIndex = 0;

function init(){
     addPath("Bell.jpg");
     addPath("Dads.png");

     getImagePath(0);
}

function addPath(path){
     var index = imagePath.length;
     imagePath[index++] = path;  
}

function getImagePath(index){
     var length = imagePath.length;

     if(index <= length){
        if(index >= 0){
            document.getElementById("pic").src = imagePath[index];
            document.getElementById("pic").alt = imagePath[index];
            imageIndex = index;
        }
     } else {
        document.getElementById("pic").src = "DOES NOT EXIST";
        document.getElementById("pic").alt = "DOES NOT EXIST";
     }
}

it doesn't appear to be calling the javascript init() method however

The above is now solved thank you

BUT Edit 2

the init function needs to run when you load the page before the buttons will know where to point the image source to. How can I call the init() when the page loads up?

Solution

You need to put here

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server" /> 
    <script src="JScript.js" type="text/javascript"></script>
</asp:Content>

Edit 1

function getImagePath(index){
     var length = imagePath.length;

     if(index <= length){
        if(index >= 0){
            document.getElementById("<%= pic.ClientID %>").src = imagePath[index];
            document.getElementById("<%= pic.ClientID %>").alt = imagePath[index];
            imageIndex = index;
        }
     } else {
        document.getElementById("<%= pic.ClientID %>").src = "DOES NOT EXIST";
        document.getElementById("<%= pic.ClientID %>").alt = "DOES NOT EXIST";
     }
}

Also

function init(){
      addPath("Bell.jpg");
      addPath("Dads.png");
      getImagePath(0);
      return false;
   }