Assignment No.

03
Total Marks: 50
Semester Spring 2011
Introduction to Computing-CS101 Due Date: 13/06/2011
Objective:
To learn the basics of HTML and JavaScript.
Instructions:
Please read the following instructions carefully before solving & submitting assignment:
Assignment should not be copied from net or any other student.

It should be clear that your assignment will not get any credit (zero marks) if:

o The assignment is submitted after due date.

o The submitted assignment does not open or file corrupt.
o The assignment is copied (from other student or internet).
o Assignment submitted in any format other than HTML format (i.e. file.html).

For any query about the assignment, contact at cs101@vu.edu.pk

GOOD LUCK

Design a web page using HTML. Read assignment instructions carefully.

This assignment has two tasks : (Total Marks = 50)

1. Designing a web page with the help of HTML. (25 Marks)
2. Implementing event handing on HTML elements with the help of JavaScript. (25 Marks)

Follow the instructions given according to the task.

 Instructions for Task 1.

Layout must be in
Place vu logo given in tabular format and
with assignment file and use any color for
assignment title. Both border except
must aligned center. On black.
click vu logo jump to
http://vulms.vu.edu.pk/
and open in new page.

Initially “Female” must be

selected for gender and only
one gender should be selected
one time. Initially “Select
Text in Location” for location
These
the left Note: list must contain 5 city
text
column names. (Lahore, Islamabad,
boxes
should be Karachi, Multan and
must be
aligned Peshawar.
read-
right and only.
top

Element in the 2nd and These check

3rd column must be boxes must
aligned top and left. be disabled.

On click submit jump to

http://bookshop.vu.edu.pk
/
On click reset set all fields
to their initial states.
Final layout should be same as given in the screen shot below.
Task 2: Perform event handling on HTML page designed
in task 1. The fields that are read-only and disabled in
task 1 must remain disabled and read-only in task 2.

Instructions for Task 2

3. On click Ok set 1. On click

typing pointer in the submit validate
name field. empty name
field.

2. Display message
box with same text.
3. On clink OK set 1. On click submit
typing pointer in the validate password field
2. Display message with length between 6
password field.
box with same text.
3. On clink OK set 1. On click submit
typing pointer in the validate empty address
address field. field.
2. Display message
box with same text.
 2. Display message box if Male
radio button is not selected

1. On click
submit,
validate
whether Male
radio button is
selected.
 box with same text.
2. Display message

1. On click
submit validate
whether
Islamabad is
selected
Typing in left
box will also
type in right
box for name. Typing in
left box
will also
type in
Typing in left right box
box will also for
type in right password.
box for
address.
Clicking on left
check box will also
check right side
check box. In the
same level

box.
campus in the right
address of VU
will display the
Selecting location

Hints:
Read the hints carefully
How to access field object, read the handouts carefully. We can read object with help of document, form
and fieldname.
Use onkeyup event for copy text in the disabled fields while typing.
If you want to set focus of pointer to any field use focus( ) function. i.e fieldobject.focus();

For writing and reading data to and from any field use field name and value property.
See handouts lecture 15 and page 96 for this purpose.
If you want to find the length of text in the field use length property after value property.
See handouts lecture 15 and page 96.

If you want to see which radio button is select use checked property after object.
If there are more than one radio buttons in group use (radio_button_name[0] for first and
radio_button_name[1] for second radio button) for accessing the object of radio button.

Use the following addresses for different locations of VU Campuses

City Address
Lahore Virtual University Campus (SHADMAN), Lahore
1st Floor 1-Shadman Market Shadman
Islamabad Virtual University Campus, Islamabad. 9-E, Rizwan
Plaza, Blue Area, Islamabad.
Multan Virtual University Campus, Multan
23/3, Officers Colony, 2nd & 3rd Floor, Near Chungi
No. 9, Bosan Road, Multan
Karachi Virtual University Campus, Karachi
A-21, KCHS, Near Duty Free Centre, Baloch Colony
Bus Stop, Karachi
Peshawar Virtual University Campus, Peshawar
8-Jamrud Road, P.O. Tehkal Bala, Adjacent Toyota
Froniter Motors, Peshawar.

Note:

o In case of any ambiguity in assignment instructions send email at cs101@vu.ed.pk.

o Submit you assignment file only in HTML format otherwise you will get zero marks.