Basic Tutorial One

In this tutorial you will create a simple Basic program for a car rental company using SEQUENTIAL CONTROL STRUCTURE. Because there are no loops involved, only one car will be processed when the program runs.
The program will request four data items from the user:
  • the make of car
  • beginning odometer mileage reading
  • ending odometer mileage reading
  • number of gallons gas used
While the odometer readings will only be in whole miles (i.e. no tenths of a mile), the gallons of gas used could have a decimal value. The program will calculate the total miles driven and the miles per gallon. The program will display the make, total miles, miles per gallon and whether or not the car is an 'Economy Rental' (it gets more than 30 miles per gallon) in a short report on the screen.
Follow the steps outlined below to create and run this basic application.
Note: the BASIC Reference Guide can be download from this link. It identifies the VBasic instructions you will use coding in these four programs.

STEP 1 - Setting Up Your Browser and Notepad:

Although you will be dealing with only one file (BasicTutorialOne.html), you will need to have it opened in both your browser and Notepad.
Your browser will be used to run the program and view the report, and Notepad is used to enter the program statements.
Each time you make a change to the code in the BasicTutorialOne.html file in Notepad, you must save it and then refresh the file in your browser. That will cause the coding changes you make while in Notepad to be written to the file on your student data disk and then reloaded into your browser for execution and viewing.
  • Download the BasicTutorialOne.html file onto your student data disk
  • Right-click the link
  • Choose "Save Target As"
Using "My Computer":
  • Locate the file you just saved on your student data disk
  • Double click it to launch your browser.
  • **Note** (You may be asked to allow scripts to run in a popup menu at the top of the page)
Using "My Computer" again:
  • Right-click the BasicTutorialOne.html
  • Select "Open With" to bring up the submenu
  • Choose Notepad and see the HTML framework code that has already been entered for you
  • Notice that remark statements (such as rem Declare Variables) have already been entered to show the various sections of the program

STEP 2 - Enter Code Statements using Notepad:

Your Basic statements must always be typed in-between the <script type="text/VBScript"> and </script> tags. The first Vbasic statement will always be option explicit which forces the program to only allow the use of variables that have been declared (that is, they have a dim statement.) This protects against typing errors.

The first Basic statement you will alter is the comment statement that has Sue Chen's name on it (e.g. rem written by Sue Chen)
  • Change Sue's name to yours
Variables are used to "remember" data entered into the program. You will need to declare variables for the four data items requested from the user and the two data items your program will compute. You will also need a variable to hold the economy rental message
  • Enter the following statements immediately following the comment statement "rem Declare Variables"
dim carType
dim startMiles
dim endMiles
dim gallonsUsed
dim totalMiles
dim milesPerGallon
dim carMessage
You will now need to code the Display on a single line statement to display a report title line that will identify the author and the tutorial problem. Each of the two pieces of the report title are enclosed in quotes and separated by the ampersand (&) symbol. The <br> code in the second piece of the document.write() statement is html code that will force the computer to skip down a line after displaying the report title.
  • After the comment statement "rem Print report title", enter the document.write() statement with your name as below:
document.write("Sue Chen - Basic Tutorial One" & "<br>")
You will need to enter the code to get the user input using the Assign Input Data statements. Character data must be converted using the cstr() function. Numeric integers require the cint() conversion function, and numbers with decimals will use the csng() function.
  • Enter the following assign input data statements after the comment statement "rem Get user input data" being very careful to correctly enter the required parenthesis and quotes. Typing errors can cause the scripts to not run!
carType = cstr(inputbox("Enter make of car"))
startMiles = cint(inputbox("Enter beginning odometer reading"))
endMiles = cint(inputbox("Enter ending odometer reading"))
gallonsUsed = csng(inputbox("How many gallons?"))
  • After the comment statement "rem Compute values", you need to compute the total miles and miles per gallon using the Assign statements:
totalMiles = endMiles - startMiles
milesPerGallon = totalMiles / gallonsUsed
  • Also in the Compute values section of the program, add the if/else/end if statement to determine the value of the carMessage variable. This must be done after the milesPerGallon calculation:
  • if milesPerGallon >30 then
        carMessage = "Yes"
    else
        carMessage = "No"
    end if
  • In the Print detail lines section, enter the code to display the make of car, total miles, miles per gallon, and whether or not the rental is an Economy car, each on a separate line.
  • Be very careful with your typing. A missing quote or parenthesis could cause a scripting error. Also be sure to include a space after the colon (:) and before the closing quotes (" ") on the labels. Otherwise Make of car: Chevy will appear incorrectly as Make of car:Chevy
document.write("Make of car: " & carType & "<br>")
document.write("Total miles: " & totalMiles & "<br>")
document.write("Miles per gallon: " & milesPerGallon & "<br>")
document.write("Economy rental: " & carMessage & "<br>")
  • Go back and carefully check your typing
  • Click the 'Save' icon to save your changes

STEP 3 - Time to Test:

Test your program by:
  • clicking the Refresh icon on your browser
  • When asked to enter data, use the following values for testing your program:
Enter Chevy for the make of car
Enter 2300 for the beginning
Enter 2742 for the ending odometer readings
Enter 8.5 for the gallons used
Once you have entered the last requested data, and if you have coded your program correctly, your program will produce the written report on the monitor and end.
If you are having problems getting the program to run, check out the Debugging Help link on the class Web site.

STEP 4 - Documentation:

  • Print a copy of the page displayed on your browser and a copy of the source code from Notepad for your future reference
Return to 110 Examples Page