Basics - Variables, Button Actions, & Alerts
Variables are holders with information in them... like a labeled dish for food leftovers night. You want to be able to look on the outside to know -exactly- what is contained within. They can hold words (called strings in programmer talk) or numbers (either whole numbers, which are called integers, or numbers with a decimal point, which are called real numbers), and many other things.
Actions are when something happens. It could be when a page loads, when a link is clicked, when your mouse moves over an image, when a button is clicked--almost anything.
Let's combine our knowledge of variables with our knowledge of actions.We're setting up two variables, string1 and string2. (In programming, we want to keep all variables the same format, because browsers don't like when you mix the two.. string1 and String1 could, in theory, hold two different pieces of information--it's called case sensitivity.)
Notice the s is not capitalized in the first one, but is capitalized in the second one.
Third, we're having a button, with an OnClick action (meaning, when clicked!) We'll use a holder form for simplicity.
Click the Combine Strings button to see the script work.
Let's talk about this script. It uses a standard web form, and has two input boxes that can be changed, one named string1 and one named string2. A third input box is called showMeArea which is set to be readonly so you can't edit what's inside it.
Here's a silly but effective example that shows how to combine regular variables and variables inside a form. Our goal is to have an input box that says "Your Name:" and it will output, "Welcome to our website" followed by your name, followed by an !. The text "Welcome to our website" will be placed in a variable.
Enter your name in the box, then click "Show Message!"
You'll notice a problem with this script... you could say it's a bug. The user can press the button without entering their name! Try it! That's definitely a problem. Let's throw in an alert message pop-up when they forget to put in their name.
Try pressing the button without entering your name. Then try again with your name.
This code is a lot more complicated. You'll notice an entire function dedicated to doing our work. Look near the end of the sample code, where it says:<input type="button" value="Show Message!" OnClick="checkName(visitor_name,
So checkName is called with two parameters (both objects) called visitor_name and showMeArea. function checkName translates these two into nameObj and displayObj.
nameObj is checked to see if at least one letter, number, or symbol is in it... meaning someone at least tried to type in a name. The code is saying "If the name field object has less than one character, then show an alert." Then, it says "otherwise (else) change the display field object to show our welcome message, including the name.