Tutorial J9
Aim: To learn about basic JavaScript and using forms and validating forms
Name: Tan Wan Sean_____________________________ Date:
_________________
1. Open a text editor of your choice, such as Notepad (on Windows) or TextEdit (on a Mac).
2. Create an HTML page leaving space between <body> and </body> tags.
3. Between the <body> and </body> tags add the <script> and </script> tags.
4. Try the 3 types of forms below:
Print screen output here:
5. Try out the code below to see how JavaScript can collect values from a form and also
insert values into it:
Amend the above code to perform multiplication:
<!DOCTYPE html>
<html>
<head>
<script>
function add()
{
var a,b,c
a=Number([Link]("first").value);//get first value from form
b=Number([Link]("second").value);//get second value
from form
c= a + b;
[Link]("answer").value=c;//puts answer in the form
}
</script>
</head>
<body>
<form id="info_form">
<label>First number:</label><input type="text" id="first"><br/>
<label>Second number:</label><input type="text"id="second"><br/>
<label>Answer:</label><input type="text" input id="answer"><br/>
</form>
<button onclick="add()">Add</button>
</body>
</html>
6. We will return to the numbers guessing game again but this time using a form ID method
for input. First create the form as follows:
<div class="form">
<label for="guessField">Enter a guess: </label>
<input type = "text" id = "guessField" class = "guessField">
<input type = "submit" value = "Submit guess"
class = "guessSubmit" id = "submitguess">
</div>
7. Next create the code for the game:
<script type = "text/javascript">
// random value generated
var y = [Link]([Link]() * 10 + 1);
// counting the number of guesses
// made for correct Guess
var guess = 1;
[Link]("submitguess").onclick = function()
{
// number guessed by user
var x = [Link]("guessField").value;
if(x == y)
{
alert("CONGRATULATIONS!!! YOU GUESSED IT RIGHT IN "
+ guess + " GUESS ");
}
else if(x > y) /* if guessed number is greater
than actual number*/
{
guess++;
alert("OOPS SORRY!! TRY A SMALLER NUMBER");
}
else
{
guess++;
alert("OOPS SORRY!! TRY A GREATER NUMBER")
}
}
</script>
8. Explain how the game works.
The correct number is 9, if you key in the number 9, it will pops up and say “
congratulation
9. Try out this form validation code using form name method:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x = [Link]["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return
validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
10. Create an HTML page with a form and a text box with the label text "Phone Number
(XXX-XXX-XXXX):" and an id of "phone".
<body>
<form id="getphone">
<label for="phone">Phone Number (XXX-XXX-XXXX):</label>
<input type="text" id="phone"><br><br>
<input type="submit" value="Submit">
</form>
<script>
//Write your validation code for the telephone number here
</script>
</body>
11. Create a validation code for the telephone number input in the code above.
12. Try the following 2 codes and see what is the difference:
<p>Click the button to locate the last occurrence <p>Click the button to locate the last occurrence
of a specified value.</p> of a specified value.</p>
<button onclick="myFunction()">Try it</button> <button onclick="myFunction()">Try it</button>
<p id="demo"></p> <p id="demo"></p>
<script> <script>
function myFunction() function myFunction()
{ {
var str = "Hello planet earth, you are a great var str = "Hello planet earth, you are a great
planet."; planet.";
var n = [Link]("planet"); var n = [Link] ("planet");
[Link]("demo").innerHTML = [Link]("demo").innerHTML =
n; n;
} }
</script> </script>
Explain the differences:
13. Validating an email address. The following example shows a simple method (not
necessary the best) to validate an entered email address using an array using indexOf()
and lastIndexOf().
An email address must contain at least a ‘@’ sign and a dot (.). Also, the ‘@’ must not be
the first character of the email address, and the last dot must at least be one character after
the ‘@’ sign. For example: [email protected] and [email protected] are valid emails. 1.1 and a@b are invalid
emails for example.
<script>
var emailID = prompt("Enter a valid email address");
atpos = [Link]("@"); //number of chars before '@'
dotpos = [Link]("."); // number of chars before the last '.'
[Link]("Email: ", emailID, "<br>")
[Link]("atpos =", atpos, "<br/>")
[Link]("dotpos =", dotpos)
if ……………………..// work out the condition here
{
alert("Please enter correct email ID")
}
else
{
alert("Your email ID is valid!")
}
</script>
Insert your condition, test and validate the code. Your code:
14. Using regular expressions. Try it out!
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Search for an "e" in the next paragraph:</p>
<p id="p01">The best things in life are free!</p>
<p id="demo"></p>
<script>
text = [Link]("p01").innerHTML;
[Link]("demo").innerHTML = /e/.test(text);
</script>
</body>
</html>
Explain what did the above codes do?
References:
1. [Link]
2. [Link]
3. [Link]
4. [Link]
5. Chapters 13 and 14, JavaScript A Beginner’s Guide by John Pollock
