|
Application Development I am SO excited!! You have learned most of the concepts and implementations of the available JavaScript tools that I can think of, and you're ready to complete your training. This is the tutorial that I have been wanting to write all along. This is application development. Everything that you have learned up to this point will allow you to create anything you can come up with using JavaScript. Really, you don't need this tutorial at all - you could do without everything in this tutorial and still be able to create the same stuff. But, with the stuff you learn in this tutorial, your JavaScripts will likely become much more efficient, not to mention easier to create!! When you begin to create complicated JavaScripts, you'll encounter logistical problems of organization, readability, error correction, and neatness. Imagine this - you have a script that is 500 lines long. In that script, you reference a certain form object, say, 20 times. When you try to run the script, you get a syntax error that is obviously a problem with one of your references to that form object. The problem - WHICH FORM OBJECT? You could spend literally hours tracking down that one error if your JavaScript is just one big script, but if you break that script down into sub-scripts, you might find that same error in just a few minutes. Additionally, that 500 line script - which you spent countless hours coding - might be able to be reduced to as few as 200 lines, if you know how to properly organize a JavaScript application.
Remember when I told you that the only way a function could be invoked was when an event occurred and called that method? Well, I lied. There is another way, and this other way of calling function is integral for application development. Make your document look like this:
Go try it. All it's going to do is display an alert box. So, you see that this works, but you are saying to yourself, "My event called 'doIt()', but the code that invokes alert is named 'doThat()'. What's going on?" The answer is simple, once you know something about where functions fit in the JavaScript hierarchy. Functions are in the same hierarchical level as methods of window. In fact, functions ARE user-defined methods of window. Functions hold the same hierarchical value as a window method like 'alert'. Knowing this, you can easily see how that one line of code in the 'doIt()' function calls the 'doThat()' function. By knowing how to call functions from other functions, we can begin to learn how to break our long scripts into shorter sub-scripts by using multiple functions. Imagine that we are creating an application that does one of two things. It either displays a form value as-is, or it multiplies that form value by 1000 and then displays it depending on which button you click. Here's an example. Make your page look like this:
Go try it if you don't understand what it does. Notice that in both functions we used the 'alert()' method to display some value. Because of that, you had to type that command twice. Now, add this red stuff:
Go try that. Does the same thing doesn't it? Of course, your saying to yourself, "Man is this guy dumb. He's saying that I can save work by using this multiple functions stuff, but I actually had to type more to do that last example." In this case, that is true. But, what if, instead of us using that same 'alert' method in both of the original functions, you were doing some complex manipulation that required 20 lines of code. Instead of having to type that 20 lines of code twice, wouldn't you rather type it just one time when you placed it into another function, and then be able to call that code from the other functions. I assure that you would. I personally have had times where I repeated some series of commands that were 100 lines long, and by using another function, I saved myself tons of time (not to mention that the page took just that much less time to load since there was so much less text in the file.)
As best as I can tell from reading the Netscape JavaScript Handbook, what I am about to show isn't supposed to work. But, I can assure you that it always does (at least every time I've tried it, it has worked, and I've used it a lot.) What I'm talking about is something that is referred to in Java as a public variable. What public variables are, are variables that can be accessed by ALL functions in an application. What good do these do for you? Well, you could always pass any variable values that another function that you are calling would need from within your initial function. But, in complex JavaScript applications each function might need to use the values of 10 variables. Instead of passing 10 variable values every time you call another function, you can define those variables ahead of time so that all of your functions can access their values. Here's how you do it. Change the stuff in red:
Go try it. Again it works the same. Now, let's analyze how we define these public variables. Look Below:
In red we initialize the public variable. You always initialize public variables outside of any function. That way, the value of that variable doesn't belong to any given function - instead it belongs to all functions. In blue we are setting the value of that public variable to what our needs require. In green we are calling for the value of that variable just as if it were defined within this function There's another thing to know about these public variables. Let's say that you have two functions that do something related. But, these functions aren't going to run one right after the other, so you can't pass the results from one to another - you need to store some result from one function until the other needs it. You could have a form with a hidden input hold your data until it is needed (that's how I used to do it), but if you place it into a public variable, that data will be stored until the user leaves your page. Get it? All we are doing is making sure that no function owns the public variable, so that any function can use it. We are also realizing that public variable values survive as long as the user is viewing the page.
In the previous examples, our sub-functions only displayed some value. They didn't do any computation or manipulation work. But, what if you have an application that, in several places, did the same computation but used the results of that computation differently. Type this example:
OK. As you can probably tell by now, this script adds the values entered into the two text inputs and displays their value. But what is new is that the addition is done by a sub-function. Let's analyze:
In red we are obviously setting the value of a variable. This should look very similar to previous examples where we used a method to do something to a value before the variable is set. This is no different, except that we are using a user-defined function to do that manipulation. As you can see, all you have to do is set a variable equal to your sub-function, and you'll get a value. But, most functions don't return a value, so there must be something in our sub-function that makes it return a value. Down in the sub-function - 'calculateIt()' - you'll see a blue line. In this blue line is the keyword 'return'. That keyword is what makes our sub-function return a value. The variable name 'number' which comes right after 'return' represents the value that is to be returned. Get it? That's all there is to this application development addition to the JavaScript language. The three things that we learned are
Using these tools in a complex script, you can drastically reduce your work load, make your scripts download faster, and one more thing... Suppose that by when you used a sub-function to do something that is done 20 times by you application, and you make a mistake in that sub-function. If you hadn't made that sub-function, and had instead written this code 20 times with the same mistake, you would have 20 things that you would have to fix. But, since you used a sub-function you can correct that mistake only once. Then, each of the 20 times that this process is used, it is already fixed. This can be a real time saver! |