Javascript Solutions

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>
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>
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>
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>
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>

Javascript Solutions

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript Solutions

Uploaded by

Copyright:

Available Formats

BOOK:

Web Enabled Commercial Application

Chapter 8: Introduction to JavaScript

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

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

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

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

Chapter 9: The JavaScript Document Object Model

Chapter 10: Forms used by a web site

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

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

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

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

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

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

You might also like