1) Create the folder structure: C:\Z\104JavaScriptAlert
2) Create the index.html file in the folder C:\Z\104JavaScriptAlert
3) Type the following codes into index.html file:
<html>
<head>
<title>Html-Form</title>
<script>
function testResults (form) {
var TestVar = form.inputbox.value;
alert ("You typed: " + TestVar);
}
</script>
</head>
<body>
<form name="myform" action="" method="get">
Please type input values: <br/>
<input type="text" name="inputbox" value=""/><br/>
<input type="button" name="button" value="Click"
onClick="testResults(this.form)" />
</form>
</body>
</html>
Look at the rows with blue bullets. These are the new codes introduced in this tutorial.
4) Open the index.html file using Chrome. (file:///C:/Z/104JavaScriptAlert/index.html)
Type "Hello" in the textbox.
Click the button labeled "Click".
You will get an Alert Window that says "You typed: Hello"
5) Summary:
a) This time the <script> tag has been inserted into the <head> part and not the <body> part.
b) At line no.5 ,i.e. within the <script> tag, there is a declaration statement for testResults() function.
c) At line no.16, there is a function call for testResults() , i.e. when the user clicks the "Click" button, the computer will refer to line no.5 for further activities.
d) testResults() function will get the input value in the textbox and display the value in the Alert Window as shown above.
e) At line no.6, the computer will create a variable (a type of memory) named TestVar which will keep the input value taken from the textbox.
f) At line no.7, the computer will display an Alert Window and output back the value kept by the TestVar variable.
Next, we will learn how to input numbers and perform arithmetic works.
No comments:
Post a Comment