Home
ABCs of Programming Progressively
Lay A Good Foundation
Before doing any programming, it is best to lay a good foundation by creating some or all of the objects that you will need, give them names and then instruct them to do whatever you want.
A. Create Objects
Before making objects interactive or dynamic, it is best to create objects first without any associated code.
- In Dreamweaver (or your favorite editor), create a new file and insert three text fields and one button between <body> tags. Also, add a plus sign (+) after the first text field and an equal sign (-) after the second text field:
<body>
<input type="text"> +
<input type="text"> =
<input type="text">
<button>Add Numbers</button>
</body>
- Save file (i.e., ProgressiveProgramming) and preview it in a browser.
TEST RESULT: You should see the three text fields, symbols, and buttons.
B. Give Objects Names
While we could have named the objects at the same time we created them, we wanted to do the steps in a systematic manner.
- Give names to each of the four objects by adding id attributes to them. Also, add default values to the text fields by adding value attributes.
<body>
<input type="text" id="firstName" value="10"> +
<input type="text" id="secondName" value="15"> =
<input type="text" id="total" value="0">
<button>Add Numbers</button>
</body>
NOTE: The value attributes were added so that we can TEMPORARILY ascertain the text fields values.
- Save the file and preview it in a browser.
TEST RESULT: You should see the three text fields but this time with default values.
C. Tell Objects What To Do
Once you create objects, then you can tell them what to do or tell them to tell other objects what to do. In this case, we will tell the button to tell the three text fields to tell us what their values are.
- Below the closing </body> tag, add a set of <script> tags and enclose three variables that hold references to the "value" properties of the three text fields. Also, add three alert methods to trace these values when the page first loads.
<script>
var firstNum = document.getElementById("firstNumber").value;
var secondNum = document.getElementById("secondNumber").value;
var sum = document.getElementById("total").value;
alert(firstNum);
alert(secondNum);
alert(sum);
</script>
- Save the file and preview it in a browser.
TEST RESULT: You should see the alert prompt dialog box with the value of the first text field in it. Click the OK button twice to see the other two values.
NOTE: When you want to suppress code from executing when the page first loads, you can "wrap" it in a function and then invoke that function with a function call OR an event from another object. We do both types in the next step.
- Wrap the code in the previous step within a function block (i.e., function getValues () { code here....};) and then immediately invoke the function with a function call (i.e., getValues();) below it.
<script>
function addNumbers()
{
var firstNum = document.getElementById("firstNumber").value;
var secondNum = document.getElementById("secondNumber").value;
var sum = document.getElementById("total").value;
alert(firstNum);
alert(secondNum);
alert(sum);
}
addNumbers();
</script>
- Save the file and test it in a browser.
TEST RESULT: You should see the alert dialog boxes appear as before. Click the OK button several times to view values again.
NOTE: While the function block does suppress the code, it is immediately invoke with the function call. There is no need for the function or the function call if you need to execute the code immediately when the page loads. To execute the function when there is a specify event, we will add an event attribute to the button in the next step.
- Cut the function call (i.e., addNumbers()) from the <script> tags and paste it as the onClick attribute's value in the <button> tag:
<button onClick="getValues()">Add Numbers</button>
- Save the file and test it in a browser.
TEST RESULT: You should see the alert dialog boxes appear only when you click the Add Numbers button. Click the OK button several times to view the default values again.