Scribd
Upload
92 views

Tutorial J9

The document provides a tutorial on basic JavaScript and form validation. It includes examples of using JavaScript to collect and validate form values, create a number guessing game using form inputs, and validate an email address and phone number. It also demonstrates using regular expressions to search for text in a paragraph. The tutorial covers topics like getting element values, inserting values, validating inputs, and using JavaScript functions with forms.

Uploaded by

hellloo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
92 views

Tutorial J9

The document provides a tutorial on basic JavaScript and form validation. It includes examples of using JavaScript to collect and validate form values, create a number guessing game using form inputs, and validate an email address and phone number. It also demonstrates using regular expressions to search for text in a paragraph. The tutorial covers topics like getting element values, inserting values, validating inputs, and using JavaScript functions with forms.

Uploaded by

hellloo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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(document.getElementById("first").value);//get first value from form
b=Number(document.getElementById("second").value);//get second value
from form
c= a + b;
document.getElementById("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 = Math.floor(Math.random() * 10 + 1);

// counting the number of guesses


// made for correct Guess
var guess = 1;

document.getElementById("submitguess").onclick = function()
{

// number guessed by user


var x = document.getElementById("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 = document.forms["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 = str.lastIndexOf("planet"); var n = str.indexOf ("planet");
document.getElementById("demo").innerHTML = document.getElementById("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: a.b@c.c and a@b.c are valid emails. 1.1 and a@b are invalid
emails for example.

<script>
var emailID = prompt("Enter a valid email address");
atpos = emailID.indexOf("@"); //number of chars before '@'
dotpos = emailID.lastIndexOf("."); // number of chars before the last '.'

document.write("Email: ", emailID, "<br>")


document.write("atpos =", atpos, "<br/>")
document.write("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 = document.getElementById("p01").innerHTML;
document.getElementById("demo").innerHTML = /e/.test(text);
</script>

</body>
</html>

Explain what did the above codes do?


References:
1. https://www.w3schools.com/js/default.asp
2. https://www.w3schools.com/js/js_random.asp
3. https://www.geeksforgeeks.org/number-guessing-game-using-javascript/
4. https://www.sitesbay.com/js-program/javascript-sum-of-two-numbers-in-javascript
5. Chapters 13 and 14, JavaScript A Beginner’s Guide by John Pollock

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy