05 Input & If
You have already used text fields in 01. The value property of a text field reveals the contents. If you go back to the 01 and change the contents of the text fields you will see that the value statement "The value of the text field is: ......" changes accordingly when you refresh the page.
Try adding this to a new web page:
<P><FORM ACTION="" METHOD=POST name=form1>
<P><TEXTAREA NAME=texta1 ROWS=7 COLS=45 WRAP=virtual>
The rain
in Spain
lies mainly
on the plain.
The rain in Spain lies mainly on the plain.
The rain in Spain lies mainly on the plain.
The rain in Spain lies mainly on the plain.
The rain in Spain lies mainly on the plain.
</TEXTAREA>
</FORM><FONT COLOR="#996633"> <SCRIPT LANGUAGE=JavaScript>document.write (document.form1.texta1.value)</SCRIPT>
</FONT></P>
The Text Area above is called texta1 and is contained in form1. The JavaScript that prints the contents of the area is: document.write (document.form1.texta1.value). Variables can also be set by input through a text field.
Try adding this to your web page:
<p><FORM ACTION="" METHOD=POST name=form2>
<P><INPUT TYPE=text NAME=text2 VALUE="Tex Text" SIZE=30>
</FORM></p>
<p><SCRIPT LANGUAGE=JavaScript>inq = document.form2.text2.value;
document.write("The value of this field is: " + inq + "<br>");</SCRIPT>Here
is the code used to display the contents of this text box:</p>
inq = document.form2.text2.value;
<p>document.write("The value of this
field is: " + inq ");</p>
<p>Notice in the first line the variable inq is set to the value of the text
field and on the second line this new variable is printed to the
screen.</p>
Now lets add a password type text field. Add the following to your web page:
<SCRIPT LANGUAGE=JavaScript>function rev(){
pwinq = document.form3.pwdbox.value;
document.form3.pwdreveal.value=pwinq;
}
</SCRIPT>
<FORM ACTION="" METHOD=POST name=form3>
<P><INPUT TYPE=password NAME=pwdbox VALUE="" SIZE=30>
<INPUT TYPE=button NAME=butreveal VALUE="reveal" onclick="rev()">
<INPUT TYPE=text NAME=pwdreveal VALUE="" SIZE=30>
</FORM></P>
<P>The text field on the right reveals the contents of a text field
of type password (left) when you click the reveal button.
The JavaScript function called by the button is :</P>
<P>function rev(){</P>
<P>pwinq = document.form3.pwdbox.value;</P>
<P>document.form3.pwdreveal.value = pwinq;</P>
IF
Program branching in JavaScript is accomplished in much the same way asother programming languages, using the IF - ELSE. Examine the code shown below:
if (Month == "December" && Date == 25)
- here is the "if" with the comparison in brackets ( )
- "==" means "is the same as" in Java and C. A single equals sign would cause Month to be set to December on the spot.
- "&&" means AND
- here is the else
- pay attention to the use of brackets ( ) and semicolons;
document.write("Today is Christmas and the store is closed.");
else
document.write("Welcome. We are open until 5:00 pm.");
A grading program might look something like:
if (grade > 79)
alert("You got an A")
else if(grade > 69)
alert("You got a B")
else if(Grade > 59)
alert("You got a C")
else if(Grade > 49)
alert("You got a D")
else alert("You failed.")
Notice that a grade of 81 satisfies all of the else if conditions. Like other programming languages, Javascript jumps out of the if - else if decision tree when the condition becomes true. In this case the condition 'grade > 79' is true so Javascript will not bother continuing down.
If more than one thing is happening as the result of a condition then use the {} curly braces.
if (grade > 79){
alert("You got an A")
gp+=4
}
else if(grade > 69){
alert("You got a B")
gp+=3
}
else if(Grade > 59){
alert("You got a C")
gp+=2
}
else if(Grade > 49){
alert("You got a D")
gp+=1
}
else alert("You failed.")
Review
the contents of a text field or text area are the value
text field values can be used directly as in document.form1.text1.value or you can set a variable equal to the value
a text field of type = password hides the content on screen but the value can be read out like a normal text field
if and if - else can be used to make decisions and branch program flow
else if can be used as many times as necessary in one decision tree.
you don't need a final else but it is good form and can catch problematic input.
Practice
Job 51: Modify the password text field example to display different output messages depending on the password that is entered.
Job 52: Develop a JavaScript program to generate a random number between 1 and 100. Then ask the user to guess it. The program should count the number of tries the user had to guess it. Each time the program should give a clue to the user such as: Too High or Too Low, until a correct reply is given.