spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / diaries / 5

[previous] [next]

UNIX System Administrator - SUN Solaris, Veritas, EMC, Shell Scripting, SAN (NYC)
Next Step Systems
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
ActiveState Debuts Open Source Business Suite
Salesforce Offers Visual App Builder
Codesion Steps Out From CVS's Shadow


The JavaScript Diaries: Part 5

The if/else Statement

Another type of conditional statement is called an if/else statement. It adds another dimension to the if statement. This statement allows for more complex decisions to be made within the script. The format is:

  if (condition) {
    action to be taken if the condition is true
  }
  else {
    action to be taken if the condition is false
  }

The else reserved word allows a determined action to be taken if the first condition is false. In other words, one way or another this portion of the script will be executed. If the condition is true, then the first statement will be executed; if the condition is false, the second statement will execute. Execution will then return to the main portion of the script.

Building upon our previous script, let's change it to an if/else statement.

  var userName = prompt("Please enter your name.", "");
  if ( (userName == "") || (userName == null) ) {
    alert("Don't you even know your own name?");
  }
  else {
    alert("Welcome " + userName + "!");
  }

Ah, now we're starting to do something that makes sense; this is a simple validation routine. (This should look familiar. We used it in our previous section on functions.) Here are the steps involved:

  1. The variable userName is declared and given the results of a prompt window as its value.
  2. A condition statement checks to see if any data is entered. It doesn't matter whether it is a string or a number.
    1. Our condition statement says this: if nothing is entered in the prompt window, the condition statement is true and an alert window will display the result: "Don't you even know your own name?"
  3. If the condition statement is false (e.g., data was entered into the prompt window), then an alert window will be displayed with the result: "Welcome [entered data]."

Instead of having the script run each time the page is accessed, it could be put into a function and run from a link:

  function greetVisitor() {
    var myName = prompt("Please enter your name.", "");
    if ( (myName == "") || (myName == null) ) {
      alert("Don't you even know your own name?");
    }
    else {
      alert("Welcome " + myName + "!");
    }
  }
In the body of the document, insert the following code:
<form>
  <input type="button" value="Click for Greeting" onClick="greetVisitor();"
</form>

Is it starting to come together now?

The else if Statement

When you need to check multiple conditions, you can use the else if statement. It works like this (adapted with thanks to Andrew and Jonathan Watt):

  var promptVal = prompt("Enter a number:","");

  if (promptVal > 0) {
    alert("The number you entered was positive.");
  }
  else if (promptVal == 0) {
    alert("The number you entered was 0.");
  }
  else {
   alert("The number you entered was negative.");
  }

You can include as many else if statements as needed to obtain the desired results. Let's create a script with a conditional statement from scratch and see how it's done.

home / programming / javascript / diaries / 5

[previous] [next]


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark

Created: June 10, 2005

URL: