davesite.com / webstation / JavaScript Tutorial


Basics - Variables, Button Actions, & Alerts


Just a note, my new tutorials on Coding and Web Design will be found at CrazyButLazy Digital Designs, encouraging people to use HTML, CSS, and JavaScript together.


Need a better web host, or just starting out and looking for the perfect match?

iPage servers are amazingly fast and one of the best deals out there.

Check them out: iPage Web Hosting only $1.99/month!

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.

Exercise 1

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.

Exercise 1:

string1: string2:

combined string1 + ' ' + string2:

Click the Combine Strings button to see the script work.
You can also change the values in the text input fields string1 and string2.

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.

The button that says "Combine Strings" has an action that says, "Set the value (that is, the text contents) of showMeArea to the value (text) of string1 adding after it the value (text) of string2, with a space (' ') in between them.

Button Code: OnClick="showMeArea.value= string1.value + ' ' + string2.value;"

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.

Exercise 2

Exercise 2:

Type your Name:

Enter your name in the box, then click "Show Message!"

In this script, we use JavaScript to define the value of ourText, and then when the user clicks the button to cause the OnClick action the value of showMeArea combines the text of our message (ourText) with the visitor's name from the input box (visitor_name.value) and then adds the '!'.

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.

Exercise 3

Exercise 3:

Type your 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,
showMeArea);">

When the button is clicked, we tell it to run (in programming lingo "call") the function named checkName and give it two pieces of information (called "parameters") which it can use. In our case, the parameters are Objects, which in this script are just two things with properties. visitor_name is an object because it's an input field, it has properties which include a name and a value. An object, in the most simple terms, is something that has properties about itself (eventually it'll have more than just that). Objects are extremely important to writing great JavaScript code.

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.


Last Section:
JavaScript Theory and the Drop Down List URL Jump Box

Back to the Guide

Next Section: JavaScript Image Tricks 1

Tutorial Copyright © 2001-2002, 2005 Dave Kristula. All rights reserved.