JavaScript Template

Form Letter examples:

Form Letter 1 example:

Form Letter Assignment: You will change the code examples above so your javascript program will ask the user for 5 variables. One of your variables will be a number. After you click on the button, your program will use these 5 variables in a form letter. In addition, you will add or subtract (or any calculation) something from your number input and use this new variable in the letter, giving you a total of 6 variables. You will print out a listing of your program as well as a copy of 2 different runs of your program, and submit the papers to me before class on April 12. See me right away if you have questions. Remember to save different versions of your work and return to a running copy if things get broken. Good luck!

Form Letter example 3, calculating a new variable from an existing textbox (nextyear from age)

Note:  A cut an paste into notepad could cause an error.  You can see the program run and view the source at the following link.  Cut and paste from the view source document into notepad.

Form Letter with a calculated variable:

<!doctype html>
<!– greet.html Dave Reed –>
<!– Web page that displays a personalized greeting. –>
<!– =============================================== –>

<html>
<head>
<title> Greetings </title>
</head>

<body>
<h2>Greetings</h2>
<p>
Enter your name: <input type=”text” id=”nameBox” size=12 value=””>
Enter your age: <input type=”text” id=”ageid” size=12 value=””>
</p>
<input type=”button” value=”Click for Greeting”
onclick=”name = document.getElementById(‘nameBox’).value;
age = document.getElementById(‘ageid’).value;
nextyear = parseFloat(age) + 1;

document.getElementById(‘outputDiv’).innerHTML=
‘Hello ‘ + name +
‘, welcome to my page.<br>Do you mind if I call you ‘ +
name + ‘?’+ ‘ I hear you are ‘ +
age + ‘ years old. Next year you will be ‘ + nextyear + ‘ years old.’”>
<hr>
<div id=”outputDiv”></div>
</body>
</html>

Tic Tac Toe Example:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>