• Functions
    1. Syntax:
      --- one caveat for every piece of javascript you ever write .... when you have a function with parenthesis used, do NOT add a space between the name of your function and the paranthesis, ever. That is a global syntax rule.

      example:
    2. Our Goal -- encapsulate- don't see process here!
      1. Ultimately, we want a place to send our data, change it there, and get it back properly changed, where we don't have to worry about syntax, or how it does what it does. (We don't even have to look at that syntax - it's ugly)
      2. It also should only do that ONE THING. Nothing else, or we'll have problems with the next thing we have to do
      3. We want a good understanding of exactly what it is that that function does
      4. We want a list of all the functions we will need, so we can add them to our Javascript when we need them
      5. In the "real world" of programming you'll have places where you are told you can add code. Certain code goes in certain places, - Ultimately THAT program has it's open statement, process portion, and a close)
      6. It is always extremely important to initialize your variables. If you only use them in a function, initialize them there, if it is a global variable (for that page), initialize them first off. The biggest benefit I have found was when I was doing surveys on the internet. If someone goes back to a previous page, that variable has to have a reliable starting point, not some "remembered" value from 4 pages later. I don't formally use an initialize function - because I don't introduce page events until later in the course - where you would be able to call your initialize, but just adding it to the top of your javascript works fine.
      7. Any expression and/or variable not encapsulated in a function is automatically executed when the page loads.
      8. If you add a function to your javascript you need an event to call it - the event being a mouse moving, clicking, a keypress, the window opening or closing, etc. Or you can call another function inside a function.
    3. Problems --
      1. We are usually responding to what a user does, not reading some external data page (and trying to load our page fast) so...
        The Structured way is NOT required.
        function init()
        {
          // lots of comments
          ........steps go here
        }
        function process()
        {
          //lots of comments
          .......steps go here
        }
        function close()
        {

          //lots of comments
          .......steps go here
        }
        For our html page we will display our results at various times during our code - interactively, not when every process on our page is completed, but we still need clear entry and exits for our functions.

      2. We have a heirarchy --all our html pages together, we just don't have a open - or a process... or a close...
      3. Our documents will look busy - don't worry about it
        Actually, you can put each specific situation you are coding for on it's own *.js document, cleaning up your page quite a bit. Just remember to add links to each *.js document on your html page.
    4. Modular
      1. We have to - for the back button - our pages could easily get mixed up on what they are supposed to do
      2. we will use functions to enable us to be modular
        1. They hide our processes - so we don't have to mess with them when we don't want to
        2. The let us choose which variables to change, which to let alone
        3. Syntax:
          1. tell Javascript you have a "function" -- type in "function"

            function myfunction()
            {
            ...processes go here
            }

          2. Name your function - so you can tell it apart from all the other functions

            function  myfunction()
            {
            ...processes go here
            }

          3. A set of paranthesis will be used later for variables, but you need to add it for every function
            function  myfunction()
            {
            ...processes go here
            }

          4. Curly braces tell the browser that your processes are comming, and also, when they end. Now, the browser knows when the function begins and ends.

            function myfunction()
            {
            ...processes go here
            }

      3. Variables
        1. They are a placeholder for some value
        2. In javascript it could be letters or numbers, either - you never specify
        3. We list them with a "var"
        4. Some coders you will find on the internet do not use the "var" specification -- harder to read, but it still works

          var myVariable

        5. We name it whatever we want to except the following rules

          click on the link above - to get a detailed listing of variables.

        6. We can (or not - as we choose) to type our variables. --
          String - variable-length string
          Byte - number from 0 to 255
          Integer -- number between -32000 and 32000
          Long -- number between -2000000000 and 2000000000
          Single - decimal number - between huge numbers
          Double -- even bigger decimal number, double-precision
          Date
          Boolean
          Null -- variable contains no data
          Object -- activeX object, flash object, your own made-up object, image object, window object, etc.

        7. We can have global variables, this means that every function in our script will be able to see and use that variable


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

          function myFunction()
          {
          ... processes here
          }
          //-->
          </script>
          </head>
          <body bgcolor="#FFFFFF" text="#000000" >

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

          </body>
          </html>

        8. We can have local variables, this means that only that function will be able to see and use that variable, no other functions on our page

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

          function myFunction()
          {
          var myVariable
          ... processes here
          }
          //-->
          </script>
          </head>
          <body bgcolor="#FFFFFF" text="#000000" >

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

          </body>
          </html>

        9. We can send our variable to a function, that means that that function can see that variable.
          That also means that that function may change the value of that variable.

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

          function myFunction( myVariable )
          {
          ... processes here
          }
          //-->
          </script>
          </head>
          <body bgcolor="#FFFFFF" text="#000000" >

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

          </body>
          </html>

        10. We can return a variable from our function, now, your when you call your function in your html, even though you don't send it a variable, you'll still get a value returned to you.

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

          function myFunction()
          {
          var myVariable

          ... processes here

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

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

          </body>
          </html>

        11. to set our variable to some value, we put the variable on the left, then an equal sign, then the new value to the right

          myVariable = "the helicopter" (if we need it to be equal to a string)
          myVariable = 2
          myVariable = someVariable
          myVariable = getNumber() (another function, if that function has a return() at the bottom
          myVariable = "The number is " + someVariable + "."
            (you can use a combination of variables and strings)


      4. Our function can look like this (with global variables, local variables, processes, and comments)

        <head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script language="JavaScript">
        <!--
        /********************************************************************************
        *                            People put all kinds of comments all over the place                                                   *
        *                            More comments telling us who did the program                                                         *
        *                            This program was done on April 23, 2002                                                                 *
        ********************************************************************************/

        //Here you tell me what your first variable is, where you will change it, and it's purpose
        var myFirstVar

        //Here you tell me what your first function is, what variables you will change, and the function's purpose
        //tell me here, what buttons, pictures, functions, or text call this function
        function myFunction()
        {
        //Here you tell me what your second variable is, where you will change it, and it's purpose
        var mySecond

        ... processes here

        //Here you tell me what you intend to do
        secondfunction()

        ... processes here

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

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

        </body>
        </html>
      5. After every process in javascript, or a variable statement, or calling a function, some people put a semi-colon and then,those people don't put in a new line. You may see this alot. That is an alternate way to end a javascript statement. (like a period in English). I don't care if you use a semi colon or not, but I want you to add a new line after every statement.

      6. So, Here's the traditional way for declaring a function:
        function myPants (p1, p2) {
        document.write("The most important parts of my pants are the " + p1 + " and the " + p2 + "."); }

        But did you know that there are other ways to do the same thing? Here's one way:

        mySocks = function(p1) {
        document.write("I own a grand total of " + p1 + " socks."); }

        You'd call that function just like one you'd declared in the traditional way:

        mySocks("three");

        The third way of declaring a function is with the Function object, whose function is to define functions:

        myTeeth = new Function("p1", "document.write('I have ' + p1 + ' remaining teeth.');");

        When defining a Function object, the parameters come first (you can have as many of them as you want). The last quoted string is the function body itself, with statements separated by semicolons.

        How useful is this technique? Not terribly, as it eliminates the modular aspects of functions -- one of their greatest attractions, after all. Still, these are alternatives you might need someday.