[go: up one dir, main page]
Scribd
Upload
98 views15 pages

CBWP2203 Web Programming Semester January 2011

This document contains instructions and code for a web programming assignment. It includes 6 sections - a) assignment.html which defines the page layout using frames, b) course_info.html which displays course information in the top frame, c) display.html which provides instructions and styles for the main content frame, d) controls.html which contains buttons to load examples in the third frame, e) htmljavascript.html which demonstrates HTML and JavaScript form validation, and f) vbscript.html which shows a simple example of updating the current time using VBScript. The document ends with references used for the assignment.

Uploaded by

amine khadraoui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
98 views15 pages

CBWP2203 Web Programming Semester January 2011

This document contains instructions and code for a web programming assignment. It includes 6 sections - a) assignment.html which defines the page layout using frames, b) course_info.html which displays course information in the top frame, c) display.html which provides instructions and styles for the main content frame, d) controls.html which contains buttons to load examples in the third frame, e) htmljavascript.html which demonstrates HTML and JavaScript form validation, and f) vbscript.html which shows a simple example of updating the current time using VBScript. The document ends with references used for the assignment.

Uploaded by

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

FACULTY OF INFORMATION TECHNOLOGY & MULTIMEDIA COMMUNICATION

SEMESTER JANUARY 2011

CBWP2203

WEB PROGRAMMING

MATRICULATION NO :
IDENTITY CARD NO. :
TELEPHONE NO. :
E-MAIL :
LEARNING CENTRE : BATU PAHAT
CBWP2203

a) assignment.html

<?xml version="1.0" encoding="UTF-8"?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<frameset rows="20,80">
<frame name="frame1" src="course_info.html" />
<frameset cols="25,75">
<frame name="frame2" src="controls.html" />
<frame name="frame3" src="display.html" />
</frameset>
</frameset>
</html>

2
CBWP2203

b) course_info.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
.style1 {
font-family: Tahoma;
font-size: 14px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<table border="0" bgcolor="#FFFAF0" width="100%" cellspacing="10">
<tr>
<td valign="top"> <img src="oum.jpg" alt="OUM Logo" /></td>
<td align="right">
<p class="style1">
CBWP2203 January 2011<br />
Assignment <br />
Submitted by: Nur Jannat binti Jailani <br />
Matric No: 770408016358001<br />
</p>
</td>

3
CBWP2203

</tr>
</table>
</body>
</html>

4
CBWP2203

c) display.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">
<!--
.h2 {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: blue;
}
.style2 {
font-family: Arial;
font-size: 18px;
font-weight: bold;
color: black;
}
-->
</style>

</head>
<body bgcolor="#E3E4FA">
<h2 align="center" class="h2">
Welcome to my webpage for<br />
CBWP2203 Assignment<br />

5
CBWP2203

January 2011<br />


</h2>
<p align="center" class="style2">
This assignment demonstrates some of the features of HTML, JavaScript and <br />
VBScript. <br />
Click on the appropriate button <br />
on the left to look at the examples.
</p>
</body>
</html>

6
CBWP2203

d) controls.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">
<!--
.style1 {
font-family: Tahoma;
font-size: 14px;
color: black;
font-weight: bold;
}
-->
</style>

</head>

<body bgcolor="#6698FF">

<form name="form1" method="post" action="controls.html">


<input class="style1" style="width:300px" type="button" value="HTML &amp;
JavaScript Example" onclick="window.open('htmljavascript.html','frame3')" />
<br />
<br />
<input class="style1" style="width:200px" type="button" value="VisualBasic Example"
onclick="window.open('vbscript.html','frame3')" />

7
CBWP2203

</form>

</body>

</html>

8
CBWP2203

e) htmljavascript.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript">

/* <![CDATA[ */

function trim(s)
{
return s.replace(/^\s+|\s+$/, '');
}

function validateEmail(fld) {
var error="";
var tfld = trim(fld.value);
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;

if (fld.value == "") {
alert("You didn't enter an email address.");
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
alert("Please enter a valid email address.");
} else {
alert("Your email address is valid, thank you!");
}
return error;}

9
CBWP2203

function processButton(){
var alertString = String("You are interested in: ");

if((document.userform.pilihan1.checked == true) &&


(document.userform.pilihan2.checked == true) && (document.userform.pilihan3.checked ==
true)){
alertString += "Programmes Offered, Short Courses, Visiting Campus";
document.userform.pilihan1.checked = false;
document.userform.pilihan2.checked = false;
document.userform.pilihan3.checked = false;}

else if((document.userform.pilihan1.checked == true) &&


(document.userform.pilihan2.checked == true)){
alertString += "Programmes Offered, Short Courses";
document.userform.pilihan1.checked = false;
document.userform.pilihan2.checked = false;}

else if((document.userform.pilihan1.checked == true) &&


(document.userform.pilihan2.checked == false) && (document.userform.pilihan3.checked
== true)){
alertString += "Programmes Offered, Visiting Campus";
document.userform.pilihan1.checked = false;
document.userform.pilihan3.checked = false;}

else if((document.userform.pilihan2.checked == true) &&


(document.userform.pilihan3.checked == true)){
alertString += "Short Courses, Visiting Campus";
document.userform.pilihan2.checked = false;
document.userform.pilihan3.checked = false;}

else if((document.userform.pilihan1.checked == true)){

10
CBWP2203

alertString += "Programmes Offered";


document.userform.pilihan1.checked = false;}

else if((document.userform.pilihan2.checked == true)){


alertString += "Short Courses";
document.userform.pilihan2.checked = false;}

else if((document.userform.pilihan3.checked == true)){


alertString += "Visiting Campus";
document.userform.pilihan3.checked = false;}

alert(alertString);
}
/* ]]> */

</script>
</head>

<body>

<form name="userform" method="post" action="htmljavascript4.html">

<table border="0" align="left">

<tr>
<td>Name:</td>
<td>&nbsp;<input type="text" id="name" size="30" /></td>
<td>&nbsp;</td>
</tr>

11
CBWP2203

<tr>
<td>Email Address:</td>
<td>&nbsp;<input type="text" id="fld" size="30" /></td>
<td>&nbsp;<input type="button" value="Validate" onclick='validateEmail(fld)' /></td>
</tr>
</table>
<br />
<br />
<br />
<br />
<input type="checkbox" name="pilihan1" value="1" /> I'm interested in your programmes
offered. <br />
<input type="checkbox" name="pilihan2" value="2" /> I'm interested in short courses. <br />
<input type="checkbox" name="pilihan3" value="3" /> I'm interested in visiting your
campus. <br />
<br />
<input type="button" value="Process" onclick='processButton()' />
</form>
</body>
</html>

12
CBWP2203

f) vbscript.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<center />
<h3> This is just an example of what VBScript can do </h3>
<form name="frmTime" action="vbscript.html" method="post">
<input type="text" name="timeinfo" />
<input type="button" value="Update Time" name="btnTime" />
</form>
<script type="text/vbscript">
frmTime.timeinfo.value = Now
Sub btnTime_OnClick
frmTime.timeinfo.value = Now
End Sub
</script>
</body>
</html>

13
CBWP2203

14
CBWP2203

REFERENCES

1. Aziz, M.J. (et.al). (2010). CBWP2203 Web Programming. Seri Kembangan, Selangor:
Pearson Prentice Hall.
2. Checkbox.checked : Checkbox. (2009). Retrieved March 12, 2011, from Javascript
Tutorial: http://www.java2s.com/Tutorial/JavaScript/0200__Form/Checkboxchecked.htm
3. Checkboxes in XHTML MP. (2004). Retrieved March 12, 2011, from XHTML MP
Tutorial:
http://www.developershome.com/wap/xhtmlmp/xhtml_mp_tutorial.asp?page=inputElem
ents3
4. Help with "&&" Logical Operator And If Statement. (n.d.). Retrieved March 12, 2011,
from Dream.In.Code: http://www.dreamincode.net/forums/topic/89602-help-with-
logical-operator-and-if-statement/
5. Javascript : Form Validation. (2009). Retrieved March 12, 2011, from Javascript : Form
Validation: http://www.webcheatsheet.com/javascript/form_validation.php
6. Javascript and XHTML. (2011). Retrieved March 12, 2011, from Javascript and
XHTML: http://javascript.about.com/library/blxhtml.htm
7. Johansson, R. (2008, July 8). Choosing the right doctype for your HTML documents.
Retrieved March 12, 2011, from Dev.Opera: http://dev.opera.com/articles/view/14-
choosing-the-right-doctype-for-your/
8. Lomax, P. (2001). Learning VBScript. Retrieved March 12, 2011, from
http://oreilly.com/catalog/vbscript/excerpt/ch01.html
9. Patton, T. (2007, June 11). Choosing the right document type for web pages. Retrieved
March 12, 2011, from Tech Republic: http://www.techrepublic.com/blog/programming-
and-development/choosing-the-right-document-type-for-web-pages/409
10. Quinn, L. (2005). Choosing a Doctype. Retrieved March 12, 2011, from WDG Web
Design Group: http://htmlhelp.com/tools/validator/doctype.html

15

You might also like