Essential Javascript -- A Javascript Tutorial
By Patrick Hunlock2007-12-02
Bringing It All Together
|
|
So now you know how to do basic input and output, how to do conditional branching and how to do loops. That's pretty much everything you need to know about any programming language to get started! So lets wrap everything we've done so far into one simple web application.
First we'll define our web page.
<html>
<head>
<title>My First Javascript</title>
</head>
<body>
Hello World!
</body>
</html>
Now to this we will add an input line, a drop down box, and a submit button. Notice we give an ID to the form elements, and have the submit button call a function when it's clicked. A function which we will write later. We've also added some descriptive text.
<html>
<head>
<title>My First Javascript</title>
</head>
<body>
Hello World!
<p>Say what? <input id="sayThis" size=40>
<P>How many times? <select id='howMany'>
<option value=1>1</option>
<option value=5 selected>5</option>
<option value=10>10</option>
<option value=20>20</option>
</select>
<p><button onClick='doLoop()'>Do It!</button>
</body>
</html>
Now we need to add a division where the output will occurr. We'll add this right below the form elements, specifically the "Do It!" button.
<html>
<head>
<title>My First Javascript</title>
</head>
<body>
Hello World!
<p>Say what? <input id="sayThis" size=40>
<P>How many times? <select id='howMany'>
<option value=1>1</option>
<option value=5 selected>5</option>
<option value=10>10</option>
<option value=20>20</option>
</select>
<p><button onClick='doLoop()'>Do It!</button>
<p><div id="results"></div>
</body>
</html>
The script for this will be simple enough. When the button is clicked the doLoop() function will be called. doLoop() will lookup the value of the sayThis input field, then repeat that howMany times.
Here's the script itself, separate from the HTML…
function doLoop() {
var sayWhat = document.getElementById('sayThis').value;
var maxLoop = document.getElementById('howMany').value;
var str = ''; // where we'll store our output temporarily.
for (var i=1; (i<=maxLoop); i++) {
str=str+i+':'+sayWhat+'<br>';
}
document.getElementById("results").innerHTML=str;
}
And the entire application, all together.
<html>
<head>
<title>My First Javascript</title>
</head>
<body>
Hello World!
<p>Say what? <input id="sayThis" size=40>
<P>How many times? <select id='howMany'>
<option value=1>1</option>
<option value=5 selected>5</option>
<option value=10>10</option>
<option value=20>20</option>
</select>
<p><button onClick='doLoop()'>Do It!</button>
<p><div id="results"></div>
<script type='text/html'>
function doLoop() {
var sayWhat = document.getElementById('sayThis').value;
var maxLoop = document.getElementById('howMany').value;
var str = ''; // where we'll store our output temporarily.
for (var i=1; (i<=maxLoop); i++) {
str=str+i+':'+sayWhat+'<br>';
}
document.getElementById("results").innerHTML=str;
}
</script>
</body>
</html>
And finally a working example.
Hello World!
Say what?
How many times?
Tutorial Pages:
» Essential Javascript -- A Javascript Tutorial
» Getting Started
» In-Line Javascript
» External Javascript
» Javascript is case sensitive
» Output (writeln)
» Output (alert)
» Output (getElementById)
» Input (One Click To Rule Them All)
» Input (User Input)
» Javascript is an Event Driven Language
» Comments
» Variables
» Variable Scope
» Special Keywords
» Arithmetic Operators
» Logical and Comparison Operators
» JavaScript Conditionals: IF
» JavaScript Conditionals: SWITCH
» JavaScript Conditionals: Shorthand Assignment
» JavaScript Conditionals: Ternary Operators
» JavaScript Loops: FOR
» JavaScript Loops: FOR/IN
» JavaScript Loops: WHILE
» Bringing It All Together
» DHTML: Dynamic HTML
» Conclusion
copyright © 2006, 2007 by Patrick Hunlock
