Scribd
Upload
244 views

CBWP2203 Web Programming Semester January 2011

This document contains code for an assignment on web programming using HTML, JavaScript, and VBScript. It includes code for a frameset layout with navigation buttons, examples of form validation using JavaScript, and displaying dynamic time using VBScript. The assignment demonstrates various features of these technologies.

Uploaded by

kurungbiru
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
244 views

CBWP2203 Web Programming Semester January 2011

This document contains code for an assignment on web programming using HTML, JavaScript, and VBScript. It includes code for a frameset layout with navigation buttons, examples of form validation using JavaScript, and displaying dynamic time using VBScript. The assignment demonstrates various features of these technologies.

Uploaded by

kurungbiru
Copyright
© Attribution Non-Commercial (BY-NC)
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>

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>

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

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>

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>

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-withlogical-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/14choosing-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/programmingand-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