Scribd
Upload
648 views

Javascript Solutions

Solutions to Hands on exercises of JavaScript from the book Web Enabled Commercial Application Development Using Html, Java Script by Ivan Bayross

Uploaded by

kashika deengra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
648 views

Javascript Solutions

Solutions to Hands on exercises of JavaScript from the book Web Enabled Commercial Application Development Using Html, Java Script by Ivan Bayross

Uploaded by

kashika deengra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

BOOK:

Web Enabled Commercial Application


Development Using Html, Java Script
by
Ivan Bayross

Chapter 8: Introduction to JavaScript

1. Write a JavaScript code block using arrays and generate the


current date in words, this should include the day, the month,
and the year. The output should be as follows: Saturday,
January 01, 2000.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<script type="text/javascript">
function dateFormat()
{
var date = new Date();
var day=date.getDay();
var month=date.getMonth();
var days = new Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");
var months = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September", "October", "November",
"December");
alert(days[day]+", "+ months[month]+" "+date.getDate()+",
"+date.getFullYear());
}
function validate()
{
dateFormat();

</script>
</head>
<body>
<form onsubmit="validate()">
<input type="submit" value="Get Current date">
</form>
</body>
</html>

2. Write a JavaScript code block, which checks the contents


entered in a form’s text element. If the text entered is in
lower case, convert to upper case using toUppercase().

<!DOCTYPE html>
<html>
<head>
<title>Uppercase</title>
<script type="text/javascript">
function validate() {
var txt = document.getElementById('t').value;
console.log(txt);
if(txt.match(/[a-z]+/))
{
txt=txt.toUpperCase();
alert("Capitalized string is: " + txt);
}

}
</script>
</head>
<body>

Enter text: <input type="text" name="t1" id="t" required><br><br>


<input type="submit" value="Check" onclick="validate()">
</body>
</html>

3. Write a JavaScript code block, which validates a username


and password against hard coded values.
If either the name or password field is not entered, display an
error message showing:
“You forgot one of the required fields. Please try again.”
In case, the fields entered do not match the hard coded
values, display an error message showing:
“Please enter a valid username and password.”
If the fields entered match, display the following message:
“Welcome (username)”.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function validate()
{
var username=document.getElementById("user").value;
var password=document.getElementById("pass").value;
if(username==""||password=="")
alert("You forgot one of the required fields. Please try
again");
else{

if(username=="student"&&password=="student")
document.write("Welcome");
else
alert("Please enter a valid username and
password");
}
}
</script>
</head>
<body>
<form>
<input type="text" id="user" placeholder="Username" >
<br>
<input type="password" id="pass" placeholder="Password" >
<br>
<input type="submit" value="Login" onclick="validate();">
</form>
</body>
</html>

Chapter 9: The JavaScript Document Object Model


1. Create a web page using two image files, which switch
between one another as the mouse pointer moves over the
images. Use the onMouseOver and onMouseOut event
handlers.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("image").src="img2.jpg";
}
function mouseOut()
{
document.getElementById("image").src="img1.jpg";
}

</script>
</head>
<body>
<img src="img1.jpg" id="image" onmouseover="mouseOver()"
onmouseout="mouseOut()"height="600" width="400">
</body>
</html>

Chapter 10: Forms used by a web site

1. Create a web page, which accepts user information and


user comments on the web site. Design the web page
using form elements and check if all the text fields have
been entered with data, else display an alert.
<!DOCTYPE html>
<html>
<head>
<title>Q6</title>
<script type="text/javascript">
function fin() {
alert("Submitted. Thanks");
}
</script>
</head>
<body>
<form onsubmit="fin()">
First Name: <input type="text" id="f"><br><br>
Last Name: <input type="text" id="f"><br><br>
Email: <input type="text" id="f"><br><br>
Address: <input type="text" id="f"><br><br>
City: <input type="text" id="f"><br><br>
State: <input type="text" id="f">
Postal Code: <input type="text" id="f">
Country: <input type="text" id="f"><br><br>

<h3><I>Please choose the most appropriate statement</h3></I>


<input type="radio" name="r1"> I regularly purchase items online <br>
<input type="radio" name="r1"> I have on occasion purchased items online <br>
<input type="radio" name="r1"> I have not purchased anything online, but I would
consider it <br>
<input type="radio" name="r1"> I prefer to shop in real stores <br>

<h3><I>I am interested in: (Choose all that apply)</I></h3>


<input type="checkbox" name="c1"> Hiking <br>
<input type="checkbox" name="c1"> Mountain Biking <br>
<input type="checkbox" name="c1"> Camping <br>
<input type="checkbox" name="c1"> Rock Climbing <br>
<input type="checkbox" name="c1"> Off-road 4WD <br>
<input type="checkbox" name="c1"> Cross-country Skiing <br>

<h3><I>I learnt about this site from</I></h3>


<select>
<option>The internet</option>
<option>Friends or family</option>
<option>TV advertisements</option>
<option>Print advertisements</option>
</select>

<h3><B> Comments </B></h3>

<textarea rows="10" cols="80">


Please type any comments here
</textarea><br><br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Start over">
</form>

</body>
</html>

You might also like