Options for linking Javascript in an html page

  1. Of course, you should always use the

    <script>
    ....
    </script>
    <noscript>
    ....
    </noscript>

    tags for compliancy with browsers less than version 4 (IE) and 3(Netscape).

  2. Options for linking javascript:
    1. List all your script at the top of the page

      <head>
      <title>Untitled Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <script language = "JavaScript" type="text/JavaScript">
      <!--

      //-->
      </script>
      </head>
      <body bgcolor="#FFFFFF" text="#000000" >

      The body of our page (text, tables, pictures....) go here

      </body>
      </html>


    2. Inline - at the link you want to control

      example:
      <input type="button" name="submit" value="submit" onClick="document.images["buttonOne"].src="pict3.gif">

      If you want to do TWO or more expressions inline, use a semi-colon between the statements:
      example:
      <input type="button" name="submit" value="submit" onClick="document.images["buttonOne"].src="pict3.gif ; document.images["buttonTwo"].src="pict4.gif ">

    3. Link to an external Javascript document
      1. This is a good option because it allows the browser to cache all the script to re-use on every page in your site, allowing all the pages to load much faster.
      2. How to:
        1. Save a text file as myScript.js
          1. -- the ending *.JS part is the important part here (match case, I capitalize for emphasis)
          2. name your script whatever you want to name it (don't use reserved names or symbols)
          3. In notepad (usually) choose "save as" and choose the "type" to be "All files (*.*)
          4. On your js document, just list the variables, expressions, comments, and functions - nothing else
          5. use comment delimiters for javascript - not for html (it's not an html page)

            example: (all this saved as myscript.js)

            var picts = new
            Array();
            picts[1] = "diamond.gif";
            picts[2] = "heart.gif";
            picts[3] = "spade.gif";
            picts[4] = "club.gif";

            var index = 1

            function displayPicture()
            {
                 var the_picture
                 if ( index <= 4 )
                 {
                      the_picture = picts[index];
                      document.images["buttonOne"].src= the_picture;
                      index = index + 1
                 }
            else index = 1
            }



        2. On your html page, list your link to the *.js file like this:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
          "http://www.w3.org/TR/REC-html40/loose.dtd">

          <html><head><title>my title</title>

          <script type="text/javascript" language="javascript" src="myScript.js"></script>

          <body>
          html stuff goes here
          </body>
          </html>

    4. On your html page, inside the body tags!
      <head>
      <title>Untitled Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

      </head>
      <body bgcolor="#FFFFFF" text="#000000" >

      The body of our page (text, tables, pictures....) go here
      <script language = "JavaScript" type="text/JavaScript">
      <!--
      function myFunction()
      {
      document.write("hello")
      }
      //-->
      </script>

      </body>
      </html>
    5. On your html page, after the body tags, before the ending </html> tag!
      <head>
      <title>Untitled Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

      </head>
      <body bgcolor="#FFFFFF" text="#000000" >

      The body of our page (text, tables, pictures....) go here


      </body>
      <script language = "JavaScript" type="text/JavaScript">
      <!--

      //-->
      </script>
      </html>
    6. Combination of all three - top of page, inline, and external style sheet

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
      "http://www.w3.org/TR/REC-html40/loose.dtd">

      <html><head><title>my title</title>

      <script type="text/javascript" language="javascript" src="myScript.js"> </script> -- make sure you close your tag
      <script language = "javascript" type="text/javascript">
      <!--
      ... code here
      //-->
      </script>
      </head>
      <body bgcolor="#FFFFFF" text="#000000" >

      The body of our page (text, tables, pictures....) go here
      <script language = "javascript" type="text/javascript">
      <!--
      ... code here
      //-->
      </script>
      </body>
      <script language = "javascript" type="text/javascript">
      <!--
      ... code here
      //-->
      </script>
      </html>