SCHOOL COMPUTING AND INFORMATICS
DEPARTMENT OF INFORMATION TECHNOLOGY
UNIT CODE: DIT 2210 UNIT TITLE: INTERNET PROGRAMMING
NAME: LEWIS KYALO WAMBUA REG NO : DIT/2021/85375
1. Using valid examples, illustrate 4 ways of incorporating JavaScript into HTML (4 marks)
Embedding code----
<!DOCTYPE html >
<html>
<head>
<title> page title</title>
<script>
document. Write ("Welcome to Java point");
</script>
</head>
<body>
<p>Inthis example we saw how to add JavaScript in the head section </p>
</body>
</html>
Inline code------
<!DOCTYPE html >
<html>
<head>
<title> page title</title>
</head>
<body>
<p>
<a href="#" onClick="alert('Welcome !');">Click Me</a>
</p>
p> in this example we saw how to use inline JavaScript or directly in an HTML tag
</p>
</body>
</html>
External file-----
<html>
<head>
<meta charset="utf-8">
<title>Including a External JavaScript File</title>
</head>
<body>
<form>
<input type="button" value="Result" onclick="display()"/>
</form>
<script src="hello.js">
</script>
</body>
</html>
2. Describe 3 types of JavaScript dialog boxes. For each, show an example (3 marks)
Alert dialog box--------
<html>
<head>
<script type="text/javascript">
function show() {
alert("It is an Alert dialog box");
}
</script>
</head>
<body>
<center>
<h1>Hello World :) :)</h1>
<h2>Welcome to java page</h2>
<p>Click the following button </p>
<input type="button" value="Click Me" onclick="show();" />
</center>
</body>
</html>
Confirmation dialog box-------
<html>
<head>
<script type="text/javascript">
function show() {
var con = confirm ("It is a Confirm dialog box");
if(con == true) {
document.write ("User Want to continue");
}
else {
document.write ("User does not want to continue");
}
}
</script>
</head>
<body>
<center>
<h1>Hello World :) :)</h1>
<h2>Welcome to java page </h2>
<p>Click the following button </p>
<input type="button" value="Click Me" onclick="show();" />
</center>
</body>
</html>
Prompt dialog box-----
<html>
<head>
<script type="text/javascript">
function show() {
var value = prompt("Enter your Name : ", "Enter your name");
document.write("Your Name is : " + value);
}
</script>
</head>
<body>
<center>
<h1>Hello World :) :)</h1>
<h2>Welcome to java page</h2>
<p>Click the following button </p>
<input type="button" value="Click Me" onclick="show();" />
</center>
</body>
</html>
3. Explain the use of the following I JavaScript inbuilt functions (3 marks)
a. parseInt()---- this function is used to convert a string (string of digits
such as “145”) to an integer.
b. parseFloat()---this JavaScript built-in function is used to convert the
string (string of digits along with decimal point) into floating point
number.
c. eval()---this JavaScript built-in function can be used to convert a string
expression to a numeric value
4. Discuss five JavaScript event handlers. For each, show an example (5 marks)
onChange--- is commonly used to validate form fields or to otherwise perform an
action when a form field’s value has been altered by the user
onClick --handler is executed when the user clicks with the mouse on the object in
question
onFocus ---is executed whenever the specified object gains focus
onKeyPress --- determine when a key on the keyboard has been pressed.
onLoad -- triggered when the page has finished loading.
5. Write some JavaScript and HTML code to validate an email address (4 marks)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking email</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document. form1.text1. focus()'>
<div class="mail">
<h2>Input an email and submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit"
onclick="Validate Email (document. form1.text1)"/></li>
<li> </li>
</ul>
</form>
</div>
<script src="email-validation.js"></script>
</body>
</html>
6. Write JavaScript and HTML code to check if a user entered a numeric value in an ID
umber text box (4 marks)
<script>
/* this function is called when we
click on the submit button*/
function numberValidation() {
event.preventDefault();
var n = document.form.numbers.value;
if (isNaN(n)) {
document.getElementById("numberText")
.innerHTML ="Please enter Numeric value";
return false;
} else {
document.getElementById("numberText")
.innerHTML = "Numeric value is: " + n;
return true;
</script>
<img src=
<form action="#" name="form" onsubmit="numberValidation()">
Number: <input type="text" name="numbers" />
<span id="numberText"></span>
<br />
<input type="submit" value="submit" />
</form>
7. Write some JavaScript code to validate username and Password entries and ensure the
user has entered details before submitting(3 marks)
<html>
<head>
<title> Verification of valid Password </title>
</head>
<script>
function verifyPassword() {
var pw = document.getElementById("pswd").value;
//check empty password field
if(pw == "") {
document.getElementById("message").innerHTML = "**Fill the password pleae!
";
return false;
}
//minimum password length validation
if(pw.length < 8) {
document.getElementById("message").innerHTML = "**Password length must b
e atleast 8 characters";
return false;
}
//maximum length of password validation
if(pw.length > 15) {
document.getElementById("message").innerHTML = "**Password length mustn
ot exceed 15 characters";
return false;
} else {
alert("Password is correct");
}
}
</script>
<body>
<center>
<h1 style="color:green">Javatpoint</h1>
<h3> Verify valid password Example </h3>
<form onsubmit ="return verifyPassword()">
<!-- Enter Password -->
<td> Enter Password </td>
<input type = "password" id = "pswd" value = "">
<span id = "message" style="color:red"> </span> <br><br>
<!-- Click to verify valid password -->
<input type = "submit" value = "Submit">
<!-- Click to reset fields -->
<button type = "reset" value = "Reset" >Reset</button>
</form>
</center>
</body>
</html>
8. Write JavaScript code to display the following. The JavaScript code must use nested for
loops (4 marks)
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>This is an example for nested loop inJavaScript</title>
<head>
<body>
<p>Click below button to loop inner loop each ( 5 ) times for outer loop.</p>
<button onclick="myFunction()">Click Here</button>
<p id="did"></p>
<script>
function myFunction() {
var text = "";
var i;
var j;
for (i = 0; i < 5; i++) {
for (j = 0; j < 2; j++) {
text += "The number is i = " + i + " and j = " + j + "<br>";
}
}
document.getElementById("did").innerHTML = text;
}
</script>
</body>
</html>
*****
